JSX runtime and compiler for composing JavaScript data.

1. Install Deno.

2. Start a new Deno project.

deno init

3. Add jsonx as a project dependency to act as your JSX runtime.

deno add jsr:@fartlabs/jsonx

4. Add the following values to your deno.json(c) file to configure the runtime.

{
  "compilerOptions": {
    "jsx": "react-jsx",
    "jsxImportSource": "@fartlabs/jsonx"
  }
}

jsonx is versatile. Here are a few examples of what you can build with it.

You can compose standard JSON-serializable data and serialize it.

function Cat() {
  return { animals: ["🐈"] };
}

function Dog() {
  return { animals: ["🐕"] };
}

const data = (
  <>
    <Cat />
    <Dog />
  </>
);

Deno.writeTextFileSync(
  "data.json",
  JSON.stringify(data, null, 2),
);

You can compose objects containing complex JavaScript types like Maps, Sets, Dates, or RegExps.

function Matchers() {
  return {
    isEmail: /^[^\s@]+@[^\s@]+\.[^\s@]+$/,
    createdAt: new Date(),
  };
}

const config = (
  <config>
    <Matchers />
  </config>
);

console.log(config.isEmail.test("[email protected]")); // true

Because jsonx can return any JavaScript value, you can even compose functions or closures.

function Logger({ prefix }: { prefix: string }) {
  return (message: string) => console.log(`[${prefix}] ${message}`);
}

const log = <Logger prefix="jsonx" />;

log("Hello, world!"); // [jsonx] Hello, world!

6. Compile your jsonx by running the .[j|t]sx file.

deno run --allow-write example.tsx

Output (data.json):

{
  "animals": [
    "🐈",
    "🐕"
  ]
}

Optimize developer ergonomics with improved modularity and maintainability by enabling developers to compose JavaScript values like React, using JSX.

Developers often are required to write code that follows a specific schema or format. For example, a configuration file, a data file, or a response payload. This is often done using JSON, YAML, or TOML. However, these formats are not composable out of the box, and are often verbose and difficult to maintain.

jsonx isn't limited to JSON-serializable data. Functions can return any JavaScript value — strings, numbers, arrays, nested objects, class instances, functions, RegExps, Dates, Sets, Maps, and more. JSON is just one possible output format; you can also serialize to YAML, TOML, or use values directly in your runtime code.

It's a general-purpose JSX runtime for composition — similar to how React components compose UI elements using JSX, jsonx lets you compose any JavaScript values using JSX.

Projects like jsonnet address the challenge of writing complex JSON by providing a way to modularize and compose data in a dedicated language, improving overall ergonomics. While libraries exist that embed the jsonnet system within other languages, jsonnet itself is a separate tool. jsonx, on the other hand, focuses on leveraging familiar languages and tools like JavaScript and TypeScript to achieve similar modularity and composition, with the benefit of being naturally embeddable within those environments.

There's already a project, json-jsx, that offers similar functionality to jsonx. However, json-jsx is designed specifically for Babel projects, whereas jsonx targets JavaScript runtimes capable of JSX transpilation, such as Deno.

• rtx uses jsonx to compose HTTP REST API routers.
• htx is an HTML rendering library in JSX.
• agx is a JSX agent development system.

This project leverages Deno's built-in JSX support and robust module system. These features streamline development by enabling:

• Modular code: Deno's compliance with JS/TS's native module system encourages well-organized code through reusable modules.
• JSX support: Out-of-the-box JSX support facilitates scalable data composition and modularity, similar to how React components are composed.

Consequently, Deno provides a solid toolchain and developer ecosystem that enables developers to focus on what makes their projects unique, rather than reinventing the wheel.

We appreciate your help!

Run deno fmt to format the code.

Run deno lint to lint the code.

Run deno task generate to generate code.

Run deno task test to run the unit tests.

The official jsonx documentation site https://jsonx.fart.tools/ is maintained in a separate GitHub repository, FartLabs/jsonx_docs. Feel free to contribute to the documentation.

Developed with ❤️ @FartLabs