solid Documentation

A declarative, efficient, and flexible JavaScript library for building user interfaces.

35,815 stars TypeScript TypeScript 1 file · ~10,553 tokens #declarative#fine-grained#javascript#jsx#performance#proxies#reactive#solid
RAW Doc

1. Project Overview & Quickstart (solidjs/solid)

File: README.md





Website • API Docs • Features Tutorial • Playground • Discord

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!

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 and fast
  • 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 and can author custom elements
  • Isomorphic: render your components on the client and the server
  • Universal: write custom renderers 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.

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). Solid is small and completely tree-shakable, and fast 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 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.)

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, component libraries, and build-time utilities that let you write Solid code in new ways.

More

Check out our official documentation or browse some examples

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! Solid's creator and the rest of the core team are active there, and we're always looking for contributions.

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]













File: documentation/resources/examples.md

Examples

Online

Demos

Benchmarks

File: packages/solid-element/README.md

Solid Element


This library extends Solid by adding Custom Web Components and extensions to manage modular behaviors and composition. It uses 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 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 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

There is also a webpack loader that handles adding this automatically. Check out 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())
  1. 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))
  1. 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")})
  1. 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 });
  1. There is a shorthand for static id and classes
js
h("div#some-id.my-class")
  1. 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()}`
  1. 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")} />`;
  1. 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} />`;
  1. 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.

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 for documentation.

File: packages/solid/README.md





Website • API Docs • Features Tutorial • Playground • Discord

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 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 and fast
  • 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 and can author custom elements
  • Isomorphic: render your components on the client and the server
  • Universal: write custom renderers 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.

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). Solid is small and completely tree-shakable, and fast 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 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.)

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, component libraries, and build-time utilities that let you write Solid code in new ways.

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!

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 or browse some examples

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! Solid's creator and the rest of the core team are active there, and we're always looking for contributions.

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]













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

Welcome to Solid's documentation!

This is the repo for docs.solidjs.com. This repo
contains all the source code that we use to build our docs.



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 section.

Chat with us

You can learn more about Solid, get support, and meet other devs and
contributors in our Discord community.

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
and, if not,
create an issue
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
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
first!

Running the Site Locally

At the moment, we recommend running the site locally through either
CodeSandbox,
Gitpod, or
StackBlitz. These are
the quickest and easiest way to browse and edit the project files and run the
site locally.

The app uses pnpm 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 or the next available port.

Framework and Theme

The docs are built on SolidBase and uses the Osmium Theme.

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

Explore Related Technologies & Topics

View All 9,111+ Repositories →

Discover similar high-velocity repositories, agent skills, and OpenAPI specifications across the ecosystem.

#declarative Browse declarative catalog → #fine-grained Browse fine-grained catalog → #javascript Browse javascript catalog → #jsx Browse jsx catalog → #performance Browse performance catalog → #proxies Browse proxies catalog → ⚡ MCP Servers Model Context Protocol → 🧠 Agent Skills Prompt & rule files → 🔌 OpenAPI Specs REST & Swagger schemas →