ca136 / 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.

Why

• Component libraries. Managing support for libraries that provide logic or functionality meant to be used across frameworks (e.g. Material, Semantic, SDKs, etc.) is a pain. There are no viable current solutions for writing the important logic once and instantly having a version that works natively across many different frameworks. An example of this is when an organization builds a component library to be used across the business, but they also have many teams working with different frameworks (e.g. React, Vue, Angular). Writing the library in JSX lite allows the component team to write the logic once and let each team consume the components in the format that works best for them.

• No-code tools. We want to bridge the gap between code and no-code. No-code tools require a higher level of abstraction and allow rich and intuitive editing and debugging experience. But that abstraction usually means less fine grained control for those who know how to code, and the inability to work no-code workflows into the development cycle. With JSX lite, you can drag/drop to build UIs and edit the code side by side, generating usable and editable React, Vue, etc code as you need to. Support for no-code tools like Builder.io is in active development, and other tools like Figma will be supported in the future.

• Modern unified workflows for all platforms. JSX lite allows you to incrementally adopt modern and familiar workflows for many different platforms. For example, Shopify is an enormously powerful and excellent platform. But, it only supports rendering server side with their Liquid templating language. This means people either need to write Shopify stores as Liquid + jQuery, or opt to not render server side at all. With JSX lite you can modernize your workflow by generating Liquid code that hydrates to React in the browser, making your store high speed and SEO friendly with SSR but still having fast and clean renders on the client. This flow could even allow your site to become a SPA after the first page load (no more server side navigarion after the first load).

• JS framework fatigue. If you have ever had to migrate a huge codebase from one framework to another, it's an absolute nightmare. Writing at a higher level of abstraction allows you to move from one to another with ease. It also allows for incremental adoption of a new framework without having to write logic twice. Plus, if a new framework comes along that you are just itching to try and think will solve your site's performance problems, all you need is to run a command to get a version of your app with that new framework. Bye bye rewrites!

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 surprisingly 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	Planned

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