Neverending Package Mountain
    Wondering what’s next for npm?Check out our public roadmap! »

    solid-js
    TypeScript icon, indicating that this package has built-in type declarations

    0.26.5 • Public • Published

    Solid

    Build Status Coverage Status NPM Version Discord Subreddit subscribers

    Solid is a declarative JavaScript library for creating user interfaces. It does not use a Virtual DOM. Instead it opts to compile its templates down to real DOM nodes and wrap updates in fine grained reactions. This way when your state updates only the code that depends on it runs.

    Key Features

    • Real DOM with fine-grained updates (No Virtual DOM! No Dirty Checking Digest Loop!).
    • Declarative data
      • Simple composable primitives without the hidden rules.
      • Function Components with no need for lifecycle methods or specialized configuration objects.
      • Render once mental model.
    • Fast! Almost indistinguishable performance vs optimized painfully imperative vanilla DOM code. See Solid on JS Framework Benchmark.
    • Small! Completely tree-shakeable Solid's compiler will only include parts of the library you use.
    • Supports and is built on TypeScript.
    • Supports modern features like JSX, Fragments, Context, Portals, Suspense, Streaming SSR, Progressive Hydration, Error Boundaries and Concurrent Rendering.
    • Webcomponent friendly and can author Custom Elements
      • Context API that spans Custom Elements
      • Implicit event delegation with Shadow DOM Retargeting
      • Shadow DOM Portals
    • Transparent debugging: a <div> is just a div.

    Top 5 Things You Should Know about Solid

    The Gist

    import { render } from "solid-js/web";
    
    const HelloMessage = props => <div>Hello {props.name}</div>;
    
    render(() => <HelloMessage name="Taylor" />, document.getElementById("hello-example"));

    A Simple Component is just a function that accepts properties. Solid uses a render function to create the reactive mount point of your application.

    The JSX is then compiled down to efficient real DOM expressions:

    import { render, template, insert, createComponent } from "solid-js/web";
    
    const _tmpl$ = template(`<div>Hello </div>`);
    
    const HelloMessage = props => {
      const _el$ = _tmpl$.cloneNode(true);
      insert(_el$, () => props.name);
      return _el$;
    };
    
    render(
      () => createComponent(HelloMessage, { name: "Taylor" }),
      document.getElementById("hello-example")
    );

    That _el$ is a real div element and props.name, Taylor in this case, is appended to its child nodes. Notice that props.name is wrapped in a function. That is because that is the only part of this component that will ever execute again. Even if a name is updated from the outside only that one expression will be re-evaluated. The compiler optimizes initial render and the runtime optimizes updates. It's the best of both worlds.

    Want to see what code Solid generates:

    Try it Online

    Getting Started

    npm init solid <project-type> <project-name> is available with npm 6+.

    You can get started with a simple app with the CLI with by running:

    > npm init solid app my-app

    Or for a TypeScript starter:

    > npm init solid app-ts my-app

    Or you can install the dependencies in your own project. To use Solid with JSX (recommended) run:

    > npm install solid-js babel-preset-solid

    The easiest way to get setup is add babel-preset-solid to your .babelrc, or babel config for webpack, or rollup:

    "presets": ["solid"]

    For TypeScript remember to set your TSConfig to handle Solid's JSX by:

    "compilerOptions": {
      "jsx": "preserve",
      "jsxImportSource": "solid-js",
    }

    Documentation

    Resources

    No Compilation?

    Dislike JSX? Don't mind doing manual work to wrap expressions, worse performance, and having larger bundle sizes? Alternatively in non-compiled environments you can use Tagged Template Literals or HyperScript.

    You can run them straight from the browser using SkyPack:

    <html>
      <body>
        <script type="module">
          import { createSignal, onCleanup } from "https://cdn.skypack.dev/solid-js";
          import { render } from "https://cdn.skypack.dev/solid-js/web";
          import html from "https://cdn.skypack.dev/solid-js/html";
    
          const App = () => {
            const [count, setCount] = createSignal(0),
              timer = setInterval(() => setCount(count() + 1), 1000);
            onCleanup(() => clearInterval(timer));
            return html`<div>${count}</div>`;
          };
          render(App, document.body);
        </script>
      </body>
    </html>

    Remember you still need the corresponding DOM Expressions library for these to work with TypeScript. Tagged Template Literals Lit DOM Expressions or HyperScript with Hyper DOM Expressions.

    Browser Support

    The last 2 versions of modern evergreen browsers and Node LTS.

    Testing Powered By SauceLabs

    Community

    Come chat with us on Discord

    Contributors

    Open Collective

    Support us with a donation and help us continue our activities. [Contribute]

    Sponsors

    Become a sponsor and get your logo on our README on GitHub with a link to your site. [Become a sponsor]

    Status

    Solid is mostly feature complete for its v1.0.0 release. The next releases will be mostly bug fixes and API tweaks on the road to stability.

    Install

    npm i solid-js

    DownloadsWeekly Downloads

    21,853

    Version

    0.26.5

    License

    MIT

    Unpacked Size

    501 kB

    Total Files

    42

    Last publish

    Collaborators

    • avatar