render

render mounts a Solid root into a DOM node in the browser.

Import

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

Type

type MountableElement =
  | Element
  | Document
  | ShadowRoot
  | DocumentFragment
  | Node;

function render(code: () => JSX.Element, element: MountableElement): () => void;

Parameters

code

• Type: () => JSX.Element

Function that returns the root JSX to mount.

element

• Type: MountableElement

DOM node that receives the rendered output.

Return value

• Type: () => void

Dispose function for the mounted root.

Behavior

• render is a browser/client API and is unsupported in the server bundle. It creates a new root and appends its output to element. When element is document, it evaluates code() directly instead of using DOM insertion.
• The first argument must be a function so Solid can establish the root before evaluating JSX.
• The returned function disposes the root and clears the mount container's content, so mounting into an empty container is safest.

Examples

Basic usage

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

const dispose = render(() => <App />, document.getElementById("app")!);

Related

• hydrate