teleaziz / jsx-lite

Write components once, run everywhere. Compiles to Vue, React, Solid, Liquid, Svelte, and more.

Write components once, run everywhere. Compiles to Vue, React, Solid, Liquid, and more.

How does it work

JSX Lite uses a static subset of JSX, inspired by Solid. This means we can parse it to a simple JSON structure that it is easy easy to build stringifers off of for various frameworks and implementations

export function MyComponent() {
  const state = useState({
    name: 'Steve',
  });

  return (
    <div>
      <input
        value={state.name}
        onChange={(e) => (state.name = e.target.value)}
      />
    </div>
  );
}

becomes:

{
  "@type": "@jsx-lite/component",
  "state": {
    "name": "Steve"
  },
  "nodes": [
    {
      "@type": "@jsx-lite/node",
      "name": "div",
      "children": [
        {
          "@type": "@jsx-lite/node",
          "bindings": {
            "value": "state.name",
            "onChange": "state.name = event.target.value"
          }
        }
      ]
    }
  ]
}

Which can be reserialized into many languges and framworks. For instance, to support angular, we just make a serializer that loops over the json and produces:

@Component({
  template: `
    <div>
      <input [value]="name" (change)="name = $event.target.value" />
    </div>
  `,
})
class MyComponent {
  name = 'Steve';
}

Adding framework support is surprisingy easy with our plugins (docs coming soon!)

No-code tooling

JSX Lite's static JSON format also enables no-code tooling for visual code editing, for instance with Builder.io or Figma (coming soon)

Who uses it

• Builder.io
• Snap
• HTML to Figma (coming soon)

Status

Framework	Status
React	Alpha
Vue	Alpha
Liquid	Alpha
Builder	Alpha
Svelte	Planned
Solid	Planned
Figma	Planned
React Native	Planned
Angular	Considering

Coming soon

• JSX Lite Fiddle
• Stable (v1) release
• Plugin API docs for custom syntaxes and extensions
• Integration with design tools like Figma (Figma <-> JSX Lite)

Made with ❤️ by Builder.io