## 1. Project Overview & Quickstart (solidjs/solid)

## File: README.md

[](https://github.com/solidjs/solid/actions/workflows/main-ci.yml)
[](https://coveralls.io/github/solidjs/solid?branch=main)

[](https://www.npmjs.com/package/solid-js)
[](https://www.npmjs.com/package/solid-js)
[](https://discord.com/invite/solidjs)
[](https://www.reddit.com/r/solidjs/)

**[Website](https://www.solidjs.com/) • [API Docs](https://docs.solidjs.com/) • [Features Tutorial](https://www.solidjs.com/tutorial/introduction_basics) • [Playground](https://playground.solidjs.com/?version=1.3.13#NobwRAdghgtgpmAXGGUCWEwBowBcCeADgsrgM4Ae2YZA9gK4BOAxiWGjIbY7gAQi9GcCABM4jXgF9eAM0a0YvADo1aAGzQiAtACsyAegDucAEYqA3EogcuPfr2ZCouOAGU0Ac2hqps+YpU6DW09CysrGXoIZlw0WgheAGEGCBdGAAoASn4rXgd4sj5gZhTcLF4yOFxkqNwAXV4AXgcnF3cvKDV0gAZMywT8iELeDEc4eFSm3iymgD4KqprU9JLamYBqXgBGPvCBoVwmBPTcvN4AHhN6XFx43gJiRpUrm-iVXnjEjWYAa0aQUZCCa4SSzU5nfirZaZSTgi76F63CBgga7CCwiBWISicTpGaNebnJZpXj6WblES0Zj0YEAOg8VQAompxsJcAAhfAASREJzAUEIhBUmTRYEkdSAA) • [Discord](https://discord.com/invite/solidjs)**

Solid is a declarative JavaScript library for creating user interfaces. Instead of using a Virtual DOM, it compiles its templates to real DOM nodes and updates them with fine-grained reactions. Declare your state and use it throughout your app, and when a piece of state changes, only the code that depends on it will rerun.

## At a Glance
```tsx
import { createSignal } from "solid-js";
import { render } from "solid-js/web";

function Counter() {
  const [count, setCount] = createSignal(0);
  const doubleCount = () => count() * 2;
  
  console.log("The body of the function runs once...");

  return (
    <>
       setCount(c => c + 1)}>
        {doubleCount()}
      
    </>
  );
}

render(Counter, document.getElementById("app")!);
```

Try this code in our [playground](https://playground.solidjs.com/anonymous/0c88df54-91b0-4c88-bd20-e962bde49725)!


Explain this!

```tsx
import { createSignal } from "solid-js";
import { render } from "solid-js/web";

// A component is just a function that returns a DOM node
function Counter() {
  // Create a piece of reactive state, giving us an accessor, count(), and a setter, setCount()
  const [count, setCount] = createSignal(0);
  
  //To create derived state, just wrap an expression in a function
  const doubleCount = () => count() * 2;
  
  console.log("The body of the function runs once...");

  // JSX allows you to write HTML within your JavaScript function and include dynamic expressions using the { } syntax
  // The only part of this that will ever rerender is the doubleCount() text.
  return (
    <>
       setCount(c => c + 1)}>
        Increment: {doubleCount()}
      
    </>
  );
}

// The render function mounts a component onto your page
render(Counter, document.getElementById("app")!);
```

Solid compiles your JSX down to efficient real DOM updates. It uses the same reactive primitives (`createSignal`) at runtime but making sure there's as little rerendering as possible. Here's what that looks like in this example:

```js
import { template as _$template } from "solid-js/web";
import { delegateEvents as _$delegateEvents } from "solid-js/web";
import { insert as _$insert } from "solid-js/web";
//The compiler pulls out any static HTML
const _tmpl$ = /*#__PURE__*/_$template(`Increment: `);

import { createSignal, createEffect } from "solid-js";
import { render } from "solid-js/web";

function Counter() {
  const [count, setCount] = createSignal(0);
  
  const doubleCount = () => count() * 2;
  
  console.log("The body of the function runs once...");
  
  return (() => {
    //_el$ is a real DOM node!
    const _el$ = _tmpl$();
    _el$.$$click = () => setCount(c => c + 1);
     //This inserts the count as a child of the button in a way that allows count to update without rerendering the whole button
    _$insert(_el$, doubleCount);
    return _el$;
  })();
}
render(Counter, document.getElementById("app"));
_$delegateEvents(["click"]);
```



## Key Features

- Fine-grained updates to the real DOM
- Declarative data: model your state as a system with reactive primitives
- Render-once mental model: your components are regular JavaScript functions that run once to set up your view
- Automatic dependency tracking: accessing your reactive state subscribes to it
- [Small](https://dev.to/this-is-learning/javascript-framework-todomvc-size-comparison-504f) and [fast](https://krausest.github.io/js-framework-benchmark/current.html)
- Simple: learn a few powerful concepts that can be reused, combined, and built on top of
- Provides modern framework features like JSX, fragments, Context, Portals, Suspense, streaming SSR, progressive hydration, Error Boundaries and concurrent rendering.
- Naturally debuggable: A `` is a real div, so you can use your browser's devtools to inspect the rendering
- [Web component friendly](https://github.com/solidjs/solid/tree/main/packages/solid-element#readme) and can author custom elements
- Isomorphic: render your components on the client and the server
- Universal: write [custom renderers](https://github.com/solidjs/solid/releases/tag/v1.2.0) to use Solid anywhere
- A growing community and ecosystem with active core team support


 
Quick Start

You can get started with a simple app by running the following in your terminal:

```sh
> npx degit solidjs/templates/js my-app
> cd my-app
> npm i # or yarn or pnpm
> npm run dev # or yarn or pnpm
```

Or for TypeScript:

```sh
> npx degit solidjs/templates/ts my-app
> cd my-app
> npm i # or yarn or pnpm
> npm run dev # or yarn or pnpm
```

This will create a minimal, client-rendered application powered by [Vite](https://vitejs.dev/).

Or you can install the dependencies in your own setup. To use Solid with JSX (_recommended_), run:

```sh
> npm i -D babel-preset-solid
> npm i solid-js
```

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

```js
"presets": ["solid"]
```

For TypeScript to work, remember to set your `.tsconfig` to handle Solid's JSX:

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



## Why Solid?

### Performant

Meticulously engineered for performance and with half a decade of research behind it, Solid's performance is almost indistinguishable from optimized vanilla JavaScript (See Solid on the [JS Framework Benchmark](https://krausest.github.io/js-framework-benchmark/current.html)). Solid is [small](https://bundlephobia.com/package/solid-js@1.3.15) and completely tree-shakable, and [fast](https://levelup.gitconnected.com/how-we-wrote-the-fastest-javascript-ui-framework-again-db097ddd99b6) when rendering on the server, too. Whether you're writing a fully client-rendered SPA or a server-rendered app, your users see it faster than ever. ([Read more about Solid's performance](https://dev.to/ryansolid/thinking-granular-how-is-solidjs-so-performant-4g37) from the library's creator.)

### Powerful

Solid is fully-featured with everything you can expect from a modern framework. Performant state management is built-in with Context and Stores: you don't have to reach for a third party library to manage global state (if you don't want to). With Resources, you can use data loaded from the server like any other piece of state and build a responsive UI for it thanks to Suspense and concurrent rendering. And when you're ready to move to the server, Solid has full SSR and serverless support, with streaming and progressive hydration to get to interactive as quickly as possible. (Check out our full [interactive features walkthrough](https://www.solidjs.com/tutorial/introduction_basics).)

### Pragmatic

Do more with less: use simple, composable primitives without hidden rules and gotchas. In Solid, components are just functions - rendering is determined purely by how your state is used - so you're free to organize your code how you like and you don't have to learn a new rendering system. Solid encourages patterns like declarative code and read-write segregation that help keep your project maintainable, but isn't opinionated enough to get in your way.

### Productive

Solid is built on established tools like JSX and TypeScript and integrates with the Vite ecosystem. Solid's bare-metal, minimal abstractions give you direct access to the DOM, making it easy to use your favorite native JavaScript libraries like D3. And the Solid ecosystem is growing fast, with [custom primitives](https://github.com/solidjs-community/solid-primitives), [component libraries](https://kobalte.dev), and build-time utilities that let you [write Solid code in new ways](https://github.com/LXSMNSYC/solid-labels).

## More

Check out our official [documentation](https://docs.solidjs.com) or browse some [examples](https://github.com/solidjs/solid/blob/main/documentation/resources/examples.md)

## Browser Support

SolidJS Core is committed to supporting the last 2 years of modern browsers including Firefox, Safari, Chrome and Edge (for desktop and mobile devices). We do not support IE or similar sunset browsers. For server environments, we support Node LTS and the latest Deno and Cloudflare Worker runtimes.



## Community

Come chat with us on [Discord](https://discord.com/invite/solidjs)! Solid's creator and the rest of the core team are active there, and we're always looking for contributions.

### Contributors

[](https://github.com/solidjs/solid/graphs/contributors)

### Open Collective

Support us with a donation and help us continue our activities. [[Contribute](https://opencollective.com/solid)]

[](https://opencollective.com/solid/backer/0/website)
[](https://opencollective.com/solid/backer/1/website)
[](https://opencollective.com/solid/backer/2/website)
[](https://opencollective.com/solid/backer/3/website)
[](https://opencollective.com/solid/backer/4/website)
[](https://opencollective.com/solid/backer/5/website)
[](https://opencollective.com/solid/backer/6/website)
[](https://opencollective.com/solid/backer/7/website)
[](https://opencollective.com/solid/backer/8/website)
[](https://opencollective.com/solid/backer/9/website)
[](https://opencollective.com/solid/backer/10/website)

### Sponsors

Become a sponsor and get your logo on our README on GitHub with a link to your site. [[Become a sponsor](https://opencollective.com/solid#sponsor)]

[](https://opencollective.com/solid/sponsor/0/website)
[](https://opencollective.com/solid/sponsor/1/website)
[](https://opencollective.com/solid/sponsor/2/website)
[](https://opencollective.com/solid/sponsor/3/website)
[](https://opencollective.com/solid/sponsor/4/website)
[](https://opencollective.com/solid/sponsor/5/website)
[](https://opencollective.com/solid/sponsor/6/website)
[](https://opencollective.com/solid/sponsor/7/website)
[](https://opencollective.com/solid/sponsor/8/website)
[](https://opencollective.com/solid/sponsor/9/website)
[](https://opencollective.com/solid/sponsor/10/website)
[](https://opencollective.com/solid/sponsor/11/website)
[](https://opencollective.com/solid/sponsor/12/website)

---

## File: documentation/resources/examples.md

# Examples

## Online
- [Counter](https://codesandbox.io/s/8no2n9k94l) Simple Counter
- [Simple Todos](https://codesandbox.io/s/lrm786ojqz) Todos with LocalStorage persistence
- [Simple Routing](https://codesandbox.io/s/jjp8m8nlz5) Use 'switch' control flow for simple routing
- [Scoreboard](https://codesandbox.io/s/solid-scoreboard-sjpje) Make use of hooks to do some simple transitions
- [Tic Tac Toe](https://playground.solidjs.com/anonymous/335adbcd-289e-42f8-9a9c-152a96277747) Simple Example of the classic game
- [Form Validation](https://codesandbox.io/s/solid-form-validation-2cdti) HTML 5 validators with custom async validation
- [CSS Animations](https://codesandbox.io/s/basic-css-transition-36rln?file=/index.js) Using Solid Transition Group
- [Styled Components](https://codesandbox.io/s/solid-styled-components-yv2t1) A simple example of creating Styled Components.
- [Styled JSX](https://codesandbox.io/s/solid-styled-jsx-xgx6b) A simple example of using Styled JSX with Solid.
- [Counter Context](https://codesandbox.io/s/counter-context-gur76) Implement a global store with Context API
- [Async Resource](https://codesandbox.io/s/2o4wmxj9zy) Ajax requests to SWAPI with Promise cancellation
- [Async Resource GraphQL](https://codesandbox.io/s/async-resource-graphql-r4rcx?file=/index.js) Simple resource for handling graphql request.
- [Suspense](https://codesandbox.io/s/5v67oym224) Various Async loading with Solid's Suspend control flow
- [Suspense Tabs](https://codesandbox.io/s/solid-suspense-tabs-vkgpj) Deferred loading spinners for smooth UX.
- [SuspenseList](https://codesandbox.io/s/solid-suspenselist-eorvk) Orchestrating multiple Suspense Components.
- [Redux Undoable Todos](https://codesandbox.io/s/pkjw38r8mj) Example from Redux site done with Solid.
- [Simple Todos Template Literals](https://codesandbox.io/s/jpm68z1q33) Simple Todos using Lit DOM Expressions
- [Simple Todos HyperScript](https://codesandbox.io/s/0vmjlmq94v) Simple Todos using Hyper DOM Expressions

## Demos
- [TodoMVC](https://github.com/solidjs/solid-todomvc) Classic TodoMVC example
- [Real World Demo](https://github.com/solidjs/solid-realworld) Real World Demo for Solid
- [Hacker News](https://github.com/solidjs/solid-hackernews) Hacker News Clone for Solid
- [Storybook](https://github.com/rturnq/storybook-solid) Solid with Storybook

## Benchmarks
- [JS Framework Benchmark](https://github.com/krausest/js-framework-benchmark/tree/master/frameworks/keyed/solid) The one and only
- [Sierpinski's Triangle Demo](https://github.com/ryansolid/solid-sierpinski-triangle-demo) Solid implementation of the React Fiber demo.
- [WebComponent Todos](https://github.com/shprink/web-components-todo/tree/main/solid) Showing off Solid Element
- [UIBench Benchmark](https://github.com/ryansolid/solid-uibench) a benchmark tests a variety of UI scenarios.
- [DBMon Benchmark](https://github.com/ryansolid/solid-dbmon) A benchmark testing ability of libraries to render unoptimized data.

---

## File: packages/solid-element/README.md

# Solid Element
[](https://github.com/solidjs/solid/actions/workflows/main-ci.yml)
[](https://www.npmjs.com/package/solid-element)



This library extends [Solid](https://github.com/solidjs/solid) by adding Custom Web Components and extensions to manage modular behaviors and composition. It uses [Component Register](https://github.com/ryansolid/component-register) to create Web Components and its composed mixin pattern to construct modular reusable behaviors. This allows your code to be available as simple HTML elements for library interop and to leverage Shadow DOM style isolation. Solid already supports binding to Web Components so this fills the gap allowing full modular applications to be built out of nested Web Components. Component Register makes use of the V1 Standards and on top of being compatible with the common webcomponent.js polyfills, has a solution for Polyfilling Shadow DOM CSS using the ShadyCSS Parser from Polymer in a generic framework agnostic way (unlike the ShadyCSS package).

## Example

[See here](./sample.jsx) for an example of a webcomponent created by `solid-element`.

## Installation

```sh
npm i solid-element solid-js babel-preset-solid
```

## Custom Elements

The simplest way to create a Web Component is to use the `customElement` method.

The arguments of `customElement` are:
1) custom element tag (e.g. `'my-component'`)
2) (optional) Default prop values (e.g. `{someProp: 'one', otherProp: 'two'}`). Props without default values will be ignored by the customElement.
3) the Solid template function. The arguments of this function are state wrapped props as the first argument, and the underlying element as the 2nd (e.g. `(props, { element }) => {  solid code here
 }`)

```jsx
import { customElement } from 'solid-element';

customElement('my-component', {someProp: 'one', otherProp: 'two'}, (props, { element }) => {
  // ... Solid code
})
```

Props get assigned as element properties and hyphenated attributes. This exposes the component that can be used in HTML/JSX as:
```html
<my-component some-prop="some value" other-prop="some value"></my-component>
```

This is all you need to get started with Solid Element.

A shadow DOM is used by default for style isolation. If you want to disable the shadow DOM, you can do it with `noShadowDOM()` like this:

```jsx
import { customElement, noShadowDOM } from 'solid-element';

customElement('my-component', {someProp: 'one', otherProp: 'two'}, (props, { element }) => {
  noShadowDOM();
  // ... Solid code
})
```

## Examples

[Web Component Todos](https://wc-todo.firebaseapp.com/) Simple Todos Comparison

## Hot Module Replacement (new)

Solid Element exposes Component Register's Hot Module Replacement solution for Webpack and Parcel. It does not preserve state, swapping Components that are changed and their descendants. This approach is simple but predictable. It works by indicating the component to be Hot Replaced with the `hot` method in your file.

```js
import { customElement, hot } from 'solid-element';

hot(module, 'my-component');
```
This is a new feature that is actively seeking feedback. Read more: [Component Register](https://github.com/ryansolid/component-register#hot-module-replacement-new)

There is also a webpack loader that handles adding this automatically. Check out [Component Register Loader](https://github.com/ryansolid/component-register-loader)

## withSolid

Under the hood the customElement method is using Component Register's mixins to create our Custom Element. So this library also provides the way to do so directly if you wish to mixin your own functionality. It all starts by using the register HOC which upgrades your class or method to a WebComponent. It is always the start of the chain.

```jsx
import { register } from 'component-register';

/*
register(tag, defaultProps)
*/
register('my-component', {someProp: 'one', otherProp: 'two'})((props, options) =>
  // ....
)
```

Component Register exposes a convenient compose method (a reduce right) that makes it easier compose multiple mixins. From there we can use withSolid mixin to basically produce the Component method above. However, now you are able to add more HOC mixins in the middle to add additional behavior in your components.

```jsx
import { register, compose } from 'component-register';
import { withSolid } from 'solid-element';

/*
withSolid
*/
compose(
  register('my-component'),
  withSolid
)((props, options) =>
  // ....
)
```

---

## File: packages/solid/h/README.md

# Solid HyperScript

This sub module provides a HyperScript method for Solid. This is useful to use Solid in non-compiled environments or in some environments where you can only use a standard JSX transform. This method can be used as the JSX factory function.

HyperScript function takes a few forms. The 2nd props argument is optional. Children may be passed as either an array to the 2nd/3rd argument or as every argument past the 2nd.

```js
// create an element with a title attribute
h("button", { title: "My button" }, "Click Me")

// create a component with a title prop
h(Button, { title: "My button" }, "Click Me")

// create an element with many children
h("div", { title: "My button" }, h("span", "1"), h("span", "2"), h("span", "3"))
```

This is the least efficient way to use Solid as it requires a slightly larger runtime that isn't treeshakeable, and cannot leverage anything in the way of analysis, so it requires manual wrapping of expressions and has a few other caveats (see below).

## Example

```js
import { render } from "solid-js/web";
import h from "solid-js/h";
import { createSignal } from "solid-js";

function Button(props) {
  return h("button.btn-primary", props)
}

function Counter() {
  const [count, setCount] = createSignal(0);
  const increment = (e) => setCount(c => c + 1);

  return h(Button, { type: "button", onClick: increment }, count);
}

render(Counter, document.getElementById("app"));
```

## Differences from JSX

There are a few differences from Solid's JSX that are important to note. And also apply when attempting use any transformation that would compile to HyperScript.

1. Reactive expression must be manually wrapped in functions to be reactive.

```js
// jsx
{firstName() + lastName()}

// hyperscript
h("div", { id: () => props.id }, () => firstName() + lastName())
```

2. Merging spreads requires using the merge props helper to keep reactivity

```js
// jsx


// hyperscript
import { mergeProps } from "solid-js"

h("div", mergeProps({ class: selectedClass }, props))
```

3. Events on components require explicit event in the arguments

Solid's HyperScript automatically wraps functions passed to props of components with no arguments in getters so you need to provide one to prevent this. The same applies to render props like in the `<For>` component.

```js
// good
h(Button, { onClick: (e) => console.log("Hi")});

// bad
h(Button, { onClick: () => console.log("Hi")})
```

4. All refs are callback form

We can't do the compiled assignment trick so only the callback form is supported.

```js
let myEl;

h(div, { ref: (el) => myEl = el });
```

5. There is a shorthand for static id and classes

```js
h("div#some-id.my-class")
```

6. Fragments are just arrays

```js
[h("span", "1"), h("span", "2")]
```

---

## File: packages/solid/html/README.md

# Solid Tagged Template Literals

This sub module provides a Tagged Template Literal `html` method for Solid. This is useful to use Solid in non-compiled environments. This method can be used as replacement for JSX.

`html` uses `${}` to escape into JavaScript expressions. Components are closed with `<//>`

```js
// create an element with a title attribute
html`Click Me`

// create a component with a title prop
html`<${Button} title="My button">Click me<//>`

// create an element with dynamic attribute and spread
html` selectedClass()} ...${props} />`
```

Using `html` is slightly less efficient than JSX(but more than HyperScript), requires a larger runtime that isn't treeshakeable, and cannot leverage expression analysis, so it requires manual wrapping of expressions and has a few other caveats (see below).

## Example

```js
import { render } from "solid-js/web";
import html from "solid-js/html";
import { createSignal } from "solid-js";

function Button(props) {
  return html``;
}

function Counter() {
  const [count, setCount] = createSignal(0);
  const increment = (e) => setCount((c) => c + 1);

  return html`<${Button} type="button" onClick=${increment}>${count}<//>`;
}

render(Counter, document.getElementById("app"));
```

## Differences from JSX

There are a few differences from Solid's JSX that are important to note.

1. Reactive expression must be manually wrapped in functions to be reactive.

```js
// jsx
{firstName() + lastName()}

// hyperscript
html` props.id}>${() => firstName() + lastName()}`
```

2. Events on components require explicit event in the arguments

Solid's Tagged Template Literals automatically wraps functions passed to props of components with no arguments in getters so you need to provide one to prevent this. The same applies to render props like in the `<For>` component.

```js
// good
html`<${Button} onClick=${(e) => console.log("Hi")} />`;

// bad
html`<${Button} onClick=${() => console.log("Hi")} />`;
```

4. All refs are callback form

We can't do the compiled assignment trick so only the callback form is supported.

```js
let myEl;
html` myEl = el} />`;
```

5. There can be multiple top level elements

No need for fragments just:
```js
html`
  1
  2
`
```

---

## File: packages/solid/store/README.md

# Solid Store

This submodules contains the means for handling deeps nested reactivity. It provides 2 main primitives `createStore` and `createMutable` which leverage proxies to create dynamic nested reactive structures.

This also contains helper methods `produce` and `reconcile` which augment the behavior of the store setter method to allow for localized mutation and data diffing.

For full documentation, check out the [website](https://docs.solidjs.com).

## Example

```js
import { createStore } from "solid-js/store";

const [store, setStore] = createStore({
  user: {
    firstName: "John",
    lastName: "Smith"
  }
});

// update store.user.firstName
setStore("user", "firstName", "Will");
```

---

## File: packages/solid/universal/README.md

# Solid Universal

This contains the means to create the runtime for a custom renderer for Solid. This can enable using Solid to render to different platforms like native mobile and desktop, canvas or WebGL, or even the terminal. It relies on custom compilation from `babel-preset-solid` and exporting the result of `createRenderer` at a referenceable location.

## Example

### Babel

To use a custom renderer available in the (fictional) `solid-custom-dom` package you'd configure your babelrc as:
```json
{
  "presets": [
    [
      "babel-preset-solid",
      {
        "moduleName": "solid-custom-dom",
        "generate": "universal"
      }
    ]
  ]
}
```

### Vite

To use a custom renderer available in the (fictional) `solid-custom-dom` package you'd configure your vite config as:
```js
import { defineConfig } from 'vite';
import solidPlugin from 'vite-plugin-solid';

export default defineConfig({
  plugins: [solidPlugin({
    solid: {
      moduleName: "solid-custom-dom",
      generate: 'universal'
    }
  })]
});
```

To create a custom renderer you must implement certain methods and export (as named exports) the results. You may also want to forward `solid-js` control flow to allow them to be auto imported as well.

```js
// example custom dom renderer
import { createRenderer } from "solid-js/universal";

const PROPERTIES = new Set(["className", "textContent"]);

export const {
  render,
  effect,
  memo,
  createComponent,
  createElement,
  createTextNode,
  insertNode,
  insert,
  spread,
  setProp,
  mergeProps,
  use
} = createRenderer({
  createElement(string) {
    return document.createElement(string);
  },
  createTextNode(value) {
    return document.createTextNode(value);
  },
  replaceText(textNode, value) {
    textNode.data = value;
  },
  setProperty(node, name, value) {
    if (name === "style") Object.assign(node.style, value);
    else if (name.startsWith("on")) node[name.toLowerCase()] = value;
    else if (PROPERTIES.has(name)) node[name] = value;
    else node.setAttribute(name, value);
  },
  insertNode(parent, node, anchor) {
    parent.insertBefore(node, anchor);
  },
  isTextNode(node) {
    return node.type === 3;
  },
  removeNode(parent, node) {
    parent.removeChild(node);
  },
  getParentNode(node) {
    return node.parentNode;
  },
  getFirstChild(node) {
    return node.firstChild;
  },
  getNextSibling(node) {
    return node.nextSibling;
  }
});

// Forward Solid control flow
export {
  For,
  Show,
  Suspense,
  SuspenseList,
  Switch,
  Match,
  Index,
  ErrorBoundary
} from "solid-js";
```

Then to consume:
```js
import { render } from "solid-custom-dom";

function App() {
  // the skies the limits
}

render(() => <App />, mountNode)
```

> Note: For TypeScript support of non-standard JSX you will need to provide your own types at a jsx-runtime entry on your package so that it can be set as the `jsxImportSource`. If mixing and matching different JSX implementations you will need use the per file pragmas.

---

## File: packages/solid/web/README.md

# Solid Web

This submodule contains the web specific APIs for Solid that are mostly internal methods imported during compilation. It has all the code to render for the web on the server and the browser.

In addition this modules provides the primary entry point methods `render`, `hydrate`, `renderToString`, `renderToStringAsync`, `pipeToNodeWritable`, and `pipeToWritable`. As well as a few web specific control flow components `` and `<Dynamic>`.

Refer to the [website](https://docs.solidjs.com) for documentation.

---

## File: packages/solid/README.md

[](https://github.com/solidjs/solid/actions/workflows/main-ci.yml)
[](https://coveralls.io/github/solidjs/solid?branch=main)

[](https://www.npmjs.com/package/solid-js)
[](https://www.npmjs.com/package/solid-js)
[](https://discord.com/invite/solidjs)
[](https://www.reddit.com/r/solidjs/)

**[Website](https://www.solidjs.com/) • [API Docs](https://docs.solidjs.com/) • [Features Tutorial](https://www.solidjs.com/tutorial/introduction_basics) • [Playground](https://playground.solidjs.com/?version=1.3.13#NobwRAdghgtgpmAXGGUCWEwBowBcCeADgsrgM4Ae2YZA9gK4BOAxiWGjIbY7gAQi9GcCABM4jXgF9eAM0a0YvADo1aAGzQiAtACsyAegDucAEYqA3EogcuPfr2ZCouOAGU0Ac2hqps+YpU6DW09CysrGXoIZlw0WgheAGEGCBdGAAoASn4rXgd4sj5gZhTcLF4yOFxkqNwAXV4AXgcnF3cvKDV0gAZMywT8iELeDEc4eFSm3iymgD4KqprU9JLamYBqXgBGPvCBoVwmBPTcvN4AHhN6XFx43gJiRpUrm-iVXnjEjWYAa0aQUZCCa4SSzU5nfirZaZSTgi76F63CBgga7CCwiBWISicTpGaNebnJZpXj6WblES0Zj0YEAOg8VQAompxsJcAAhfAASREJzAUEIhBUmTRYEkdSAA) • [Discord](https://discord.com/invite/solidjs)**

Solid is a declarative JavaScript library for creating user interfaces. Instead of using a Virtual DOM, it compiles its templates to real DOM nodes and updates them with fine-grained reactions. Declare your state and use it throughout your app, and when a piece of state changes, only the code that depends on it will rerun. Check out our [intro video](https://www.youtube.com/watch?v=cELFZQAMdhQ) or read on!

## Key Features

- Fine-grained updates to the real DOM
- Declarative data: model your state as a system with reactive primitives
- Render-once mental model: your components are regular JavaScript functions that run once to set up your view
- Automatic dependency tracking: accessing your reactive state subscribes to it
- [Small](https://dev.to/this-is-learning/javascript-framework-todomvc-size-comparison-504f) and [fast](https://krausest.github.io/js-framework-benchmark/current.html)
- Simple: learn a few powerful concepts that can be reused, combined, and built on top of
- Provides modern framework features like JSX, fragments, Context, Portals, Suspense, streaming SSR, progressive hydration, Error Boundaries and concurrent rendering.
- Naturally debuggable: A `` is a real div, so you can use your browser's devtools to inspect the rendering
- [Web component friendly](https://github.com/solidjs/solid/tree/main/packages/solid-element#readme) and can author custom elements
- Isomorphic: render your components on the client and the server
- Universal: write [custom renderers](https://github.com/solidjs/solid/releases/tag/v1.2.0) to use Solid anywhere
- A growing community and ecosystem with active core team support



Quick Start

You can get started with a simple app by running the following in your terminal:

```sh
> npx degit solidjs/templates/js my-app
> cd my-app
> npm i # or yarn or pnpm
> npm run dev # or yarn or pnpm
```

Or for TypeScript:

```sh
> npx degit solidjs/templates/ts my-app
> cd my-app
> npm i # or yarn or pnpm
> npm run dev # or yarn or pnpm
```

This will create a minimal, client-rendered application powered by [Vite](https://vitejs.dev/).

Or you can install the dependencies in your own setup. To use Solid with JSX (_recommended_), run:

```sh
> npm i -D babel-preset-solid
> npm i solid-js
```

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

```js
"presets": ["solid"]
```

For TypeScript to work, remember to set your `.tsconfig` to handle Solid's JSX:

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



## Why Solid?

### Performant

Meticulously engineered for performance and with half a decade of research behind it, Solid's performance is almost indistinguishable from optimized vanilla JavaScript (See Solid on the [JS Framework Benchmark](https://krausest.github.io/js-framework-benchmark/current.html)). Solid is [small](https://bundlephobia.com/package/solid-js@1.3.15) and completely tree-shakable, and [fast](https://levelup.gitconnected.com/how-we-wrote-the-fastest-javascript-ui-framework-again-db097ddd99b6) when rendering on the server, too. Whether you're writing a fully client-rendered SPA or a server-rendered app, your users see it faster than ever. ([Read more about Solid's performance](https://dev.to/ryansolid/thinking-granular-how-is-solidjs-so-performant-4g37) from the library's creator.)

### Powerful

Solid is fully-featured with everything you can expect from a modern framework. Performant state management is built-in with Context and Stores: you don't have to reach for a third party library to manage global state (if you don't want to). With Resources, you can use data loaded from the server like any other piece of state and build a responsive UI for it thanks to Suspense and concurrent rendering. And when you're ready to move to the server, Solid has full SSR and serverless support, with streaming and progressive hydration to get to interactive as quickly as possible. (Check out our full [interactive features walkthrough](https://www.solidjs.com/tutorial/introduction_basics).)

### Pragmatic

Do more with less: use simple, composable primitives without hidden rules and gotchas. In Solid, components are just functions - rendering is determined purely by how your state is used - so you're free to organize your code how you like and you don't have to learn a new rendering system. Solid encourages patterns like declarative code and read-write segregation that help keep your project maintainable, but isn't opinionated enough to get in your way.

### Productive

Solid is built on established tools like JSX and TypeScript and integrates with the Vite ecosystem. Solid's bare-metal, minimal abstractions give you direct access to the DOM, making it easy to use your favorite native JavaScript libraries like D3. And the Solid ecosystem is growing fast, with [custom primitives](https://github.com/solidjs-community/solid-primitives), [component libraries](https://github.com/hope-ui/hope-ui), and build-time utilities that let you [write Solid code in new ways](https://github.com/LXSMNSYC/solid-labels).


Show Me!

```jsx
import { render } from "solid-js/web";
import { createSignal } from "solid-js";

// A component is just a function that (optionally) accepts properties and returns a DOM node
const Counter = props => {
  // Create a piece of reactive state, giving us a accessor, count(), and a setter, setCount()
  const [count, setCount] = createSignal(props.startingCount || 1);

  // The increment function calls the setter
  const increment = () => setCount(count() + 1);

  console.log(
    "The body of the function runs once, like you'd expect from calling any other function, so you only ever see this console log once."
  );

  // JSX allows us to write HTML within our JavaScript function and include dynamic expressions using the { } syntax
  // The only part of this that will ever rerender is the count() text.
  return (
    
      Increment {count()}
    
  );
};

// The render function mounts a component onto your page
render(() => <Counter startingCount={2} />, document.getElementById("app"));
```

See it in action in our interactive [Playground](https://playground.solidjs.com/?hash=-894962706&version=1.3.13)!

Solid compiles our JSX down to efficient real DOM expressions updates, still using the same reactive primitives (`createSignal`) at runtime but making sure there's as little rerendering as possible. Here's what that looks like in this example:

```js
import { render, createComponent, delegateEvents, insert, template } from "solid-js/web";
import { createSignal } from "solid-js";

const _tmpl$ = /*#__PURE__*/ template(`Increment `, 2);

const Counter = props => {
  const [count, setCount] = createSignal(props.startingCount || 1);
  const increment = () => setCount(count() + 1);

  console.log("The body of the function runs once . . .");

  return (() => {
    //_el$ is a real DOM node!
    const _el$ = _tmpl$.cloneNode(true);
    _el$.firstChild;

    _el$.$$click = increment;

    //This inserts the count as a child of the button in a way that allows count to update without rerendering the whole button
    insert(_el$, count, null);

    return _el$;
  })();
};

render(
  () =>
    createComponent(Counter, {
      startingCount: 2
    }),
  document.getElementById("app")
);

delegateEvents(["click"]);
```



## More

Check out our official [documentation](https://www.solidjs.com/guide) or browse some [examples](https://github.com/solidjs/solid/blob/main/documentation/resources/examples.md)

## Browser Support

SolidJS Core is committed to supporting the last 2 years of modern browsers including Firefox, Safari, Chrome and Edge (for desktop and mobile devices). We do not support IE or similar sunset browsers. For server environments, we support Node LTS and the latest Deno and Cloudflare Worker runtimes.



## Community

Come chat with us on [Discord](https://discord.com/invite/solidjs)! Solid's creator and the rest of the core team are active there, and we're always looking for contributions.

### Contributors

[](https://github.com/solidjs/solid/graphs/contributors)

### Open Collective

Support us with a donation and help us continue our activities. [[Contribute](https://opencollective.com/solid)]

[](https://opencollective.com/solid/backer/0/website)
[](https://opencollective.com/solid/backer/1/website)
[](https://opencollective.com/solid/backer/2/website)
[](https://opencollective.com/solid/backer/3/website)
[](https://opencollective.com/solid/backer/4/website)
[](https://opencollective.com/solid/backer/5/website)
[](https://opencollective.com/solid/backer/6/website)
[](https://opencollective.com/solid/backer/7/website)
[](https://opencollective.com/solid/backer/8/website)
[](https://opencollective.com/solid/backer/9/website)
[](https://opencollective.com/solid/backer/10/website)

### Sponsors

Become a sponsor and get your logo on our README on GitHub with a link to your site. [[Become a sponsor](https://opencollective.com/solid#sponsor)]

[](https://opencollective.com/solid/sponsor/0/website)
[](https://opencollective.com/solid/sponsor/1/website)
[](https://opencollective.com/solid/sponsor/2/website)
[](https://opencollective.com/solid/sponsor/3/website)
[](https://opencollective.com/solid/sponsor/4/website)
[](https://opencollective.com/solid/sponsor/5/website)
[](https://opencollective.com/solid/sponsor/6/website)
[](https://opencollective.com/solid/sponsor/7/website)
[](https://opencollective.com/solid/sponsor/8/website)
[](https://opencollective.com/solid/sponsor/9/website)
[](https://opencollective.com/solid/sponsor/10/website)
[](https://opencollective.com/solid/sponsor/11/website)
[](https://opencollective.com/solid/sponsor/12/website)

## 2. Official Technical Reference & Guides (solidjs/solid-docs)

Welcome to Solid's documentation!

This is the repo for [docs.solidjs.com](https://docs.solidjs.com/). This repo
contains all the source code that we use to build our docs.

[](https://gitpod.io/#https://github.com/solidjs/solid-docs-next)
[](https://codesandbox.io/p/github/solidjs/solid-docs-next/)
[](https://stackblitz.com/github/solidjs/solid-docs-next)

## What is Solid?

Solid is a JavaScript framework used for building high-performance
user-interfaces. Using a reactive approach and component-based architecture, we
want to empower developers in creating efficient and scalable web applications.

## Thank you for being here!

You can help make our docs better for the community! Your feedback is welcomed.
In addition, any editing, translating, designing, and developing skills are
welcomed. We are grateful to welcome you into our community!

If you want to see how you can contribute, check out our
[How You Can Help](#how-you-can-help) section.

## Chat with us

You can learn more about Solid, get support, and meet other devs and
contributors in our [Discord community](https://discord.com/invite/solidjs).

## Raise an issue

Have you noticed something is missing, confusing, or is wrong in our
documentation?

Check to see if it has
[already been mentioned ](https://github.com/solidjs/solid-docs/issues)
and, if not,
[create an issue](https://github.com/solidjs/solid-docs/issues/new/choose)
to bring it to our attention!

## Share an idea

Do you think something could be better? Have an idea you feel could make the
docs better?

Discussion threads are where you can offer feedback on things that might not be
problems that need addressing, but are ideas to be explored.

Join us in the
[Discussions section](https://github.com/solidjs/solid-docs/discussions/280)
where we can brainstorm these ideas, ask questions, and share goals!

## Suggest a fix or contribute

Have you found a typo, broken link, or another item with an obvious quick fix?

If you can see what the problem is, and you know how to fix it, you can make a
PR (pull request) with the change and contribute to the docs repo yourself.

If you're looking to make a larger contribution, please see our
[CONTRIBUTING.md](https://github.com/solidjs/solid-docs/blob/main/CONTRIBUTING.md)
first!

## Running the Site Locally

At the moment, we recommend running the site locally through either
[CodeSandbox](https://codesandbox.io/p/github/solidjs/solid-docs/),
[Gitpod](https://gitpod.io/#https://github.com/solidjs/solid-docs), or
[StackBlitz](https://stackblitz.com/github/solidjs/solid-docs). These are
the quickest and easiest way to browse and edit the project files and run the
site locally.

The app uses [pnpm](https://pnpm.io) as the package manager and it runs on Node.js `v22+`.

Install dependencies:

```sh
pnpm i
```

And run the local dev server:

```sh
pnpm dev
```

This will start your the app at [localhost:3000](http://localhost:3000) or the next available port.

### Framework and Theme

The docs are built on [SolidBase](https://solidbase.dev) and uses the [Osmium Theme](./osmium).

This repo should only contain content as mdx files, features should be implemented upstream and UI changes in the theme.