All Projects → BuilderIO → Jsx Lite

BuilderIO / Jsx Lite

Licence: mit
Write components once, run everywhere. Compiles to Vue, React, Solid, Angular, Svelte, and Liquid.

Programming Languages

typescript
32286 projects
declarative
70 projects

Projects that are alternatives of or similar to Jsx Lite

vscode-liquid-snippets
Shopify Liquid Template Snippets
Stars: ✭ 22 (-97.83%)
Mutual labels:  liquid, shopify
Sucrase
Super-fast alternative to Babel for when you can target modern JS runtimes
Stars: ✭ 4,436 (+337.04%)
Mutual labels:  compiler, jsx
njsx
A customizable and declarative interface for creating React and React Native components without JSX syntax.
Stars: ✭ 29 (-97.14%)
Mutual labels:  builder, jsx
gulp-shopify-theme
Shopify theme synchronisation during development
Stars: ✭ 26 (-97.44%)
Mutual labels:  liquid, shopify
Esbuild
An extremely fast JavaScript and CSS bundler and minifier
Stars: ✭ 29,374 (+2793.99%)
Mutual labels:  compiler, jsx
awesome-solid-js
Curated resources on building sites with SolidJS, a brand new way(now 1.0) to build Javascript based interactive web applications. A very close looking cousin to React/JSX by syntax, and to Svelte by few important principles(compiler and fine-grained reactivity), it's a highly optimised way to deliver web applications with best-in-class performa…
Stars: ✭ 317 (-68.77%)
Mutual labels:  solid, jsx
Shopify Theme Lab
Shopify theme development environment using Liquid, Vue and Tailwind CSS 🧪
Stars: ✭ 250 (-75.37%)
Mutual labels:  shopify, liquid
fastify-vite
This plugin lets you load a Vite client application and set it up for Server-Side Rendering (SSR) with Fastify.
Stars: ✭ 497 (-51.03%)
Mutual labels:  solid, svelte
Craigstarter
An open source crowdfunding tool built on Shopify
Stars: ✭ 484 (-52.32%)
Mutual labels:  shopify, liquid
Enso
Hybrid visual and textual functional programming.
Stars: ✭ 5,238 (+416.06%)
Mutual labels:  compiler, visual
dry
Dry is a new template engine and language, and is a superset of Shopify's Liquid, with first-class support for advanced inheritance features, and more. From the creators of Enquirer, Assemble, Remarkable, and Micromatch.
Stars: ✭ 66 (-93.5%)
Mutual labels:  liquid, shopify
Shopify Lang
Multi-Language Shopify Online Shop
Stars: ✭ 26 (-97.44%)
Mutual labels:  shopify, liquid
bootstrap-shopify-theme
🛍 A free Shopify Theme built with Bootstrap, BEM, Liquid, Sass, ESNext, Theme Tools, ... and Webpack.
Stars: ✭ 41 (-95.96%)
Mutual labels:  liquid, shopify
liquidpy
A port of liquid template engine for python
Stars: ✭ 49 (-95.17%)
Mutual labels:  liquid, shopify
shopify-wishlist
💙 A set of files used to implement a simple customer wishlist on a Shopify store
Stars: ✭ 115 (-88.67%)
Mutual labels:  liquid, shopify
lowcode
React Lowcode - prototype, develop and maintain internal apps easier
Stars: ✭ 32 (-96.85%)
Mutual labels:  builder, jsx
vscode-liquid
💧Liquid language support for VS Code
Stars: ✭ 137 (-86.5%)
Mutual labels:  liquid, shopify
element
Fast and simple custom elements.
Stars: ✭ 65 (-93.6%)
Mutual labels:  solid, jsx
Enso Archive
Looking for Enso, the visual programming language? ➡️ https://github.com/enso-org/enso
Stars: ✭ 305 (-69.95%)
Mutual labels:  compiler, visual
Solid
A declarative, efficient, and flexible JavaScript library for building user interfaces.
Stars: ✭ 13,115 (+1192.12%)
Mutual labels:  solid, jsx

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

code style: prettier PRs Welcome License Types


Try it out

 

Use our Figma plugin to turn designs into code!

 

Try our interactive fiddle

Figma plugin Fiddle

 

Try our VS Code extension for in-IDE visual coding

 

Try our Shopify app for visual Shopify store building

Vscode plugin Vscode plugin

 

Try our headless CMS for no-code APIs for all sites and apps

 

View our upcoming ecommerce integrations

Vscode plugin Vscode plugin

At a glance

JSX Lite is inspired by many modern frameworks. You'll see components look like React components and use React-like hooks, but have simple mutable state like Vue, use a static form of JSX like Solid, compile away like Svelte, and uses a simple, prescriptive structure like Angular.

An example JSX Lite component showing several features:

import { useState, Show, For } from '@jsx-lite/core';

export default function MyComponent(props) {
  const state = useState({
    newItemName: 'New item',
    list: ['hello', 'world'],
    addItem() {
      state.list = [...state.list, state.newItemName];
    },
  });

  return (
    <div>
      <Show when={props.showInput}>
        <input
          value={state.newItemName}
          onChange={(event) => (state.newItemName = event.target.value)}
        />
      </Show>
      <div css={{ padding: '10px' }}>
        <button onClick={() => state.addItem()}>Add list item</button>
        <div>
          <For each={state.list}>{(item) => <div>{item}</div>}</For>
        </div>
      </div>
    </div>
  );
}

Learn more in the docs

CLI

Try JSX Lite out locally with our CLI

npm install -g @jsx-lite/cli

jsx-lite compile --to=vue my-file.lite.jsx

Why

Component libraries

Managing support for libraries that provide UI components across frameworks is a pain, esp when webcomponents are not an option (e.g. for server side rendering, best performance, etc). With JSX Lite you can write once, and run everywhere with full compatibilty

Modern workflows for all platforms

JSX lite allows you to incrementally adopt modern and familiar workflows for many different platforms, for for Shopify instance you can server side render to liquid and hydrate with React

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

Design to code

With JSX lite, you can convert designs from Figma or Sketch and convert it to clean code for the framework of your choice. You can even use Builder.io to visually drag/drop to build UIs and edit the code side by side

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 and importing, for instance with Builder.io or Figma

Formatting options

JSX Lite supports settings for generating code to match your preferred formatting, libraries, etc. These output options will be customizable and extensible with plugins soon too

Who uses it

Status

Framework Status
React Alpha
Vue Alpha
Liquid Alpha
Builder.io Alpha
Solid Alpha
Figma Alpha
Angular Alpha
Svelte Alpha
HTML/CSS/JS Alpha
Webcomponents Alpha
React Native Alpha
SwiftUI Experimental

Coming soon

  • Stable (v1) release
  • Plugin API docs for custom syntaxes and extensions
  • VS code plugin

Made with ❤️ by Builder.io

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].