root.tsx

`root.tsx` defines the document that your application renders.

tsx
export default function Rootfunction Root(): JSX.Element() {
  return (
    <Html(alias) function Html(props: ComponentProps<&quot;html&quot;>): JSX.Element
import Html lang(property) JSX.HTMLAttributes<HTMLHtmlElement>.lang?: string | undefined="en">
      <Head(alias) function Head(props: ComponentProps<&quot;head&quot;>): JSX.Element
import Head>
        <Title(alias) const Title: Component<JSX.HTMLAttributes<HTMLTitleElement>>
import Title>SolidStart App</Title(alias) const Title: Component<JSX.HTMLAttributes<HTMLTitleElement>>
import Title>
        <Meta(alias) const Meta: Component<JSX.MetaHTMLAttributes<HTMLMetaElement>>
import Meta charset(property) JSX.MetaHTMLAttributes<HTMLMetaElement>.charset?: string | undefined="utf-8" />
        <Meta(alias) const Meta: Component<JSX.MetaHTMLAttributes<HTMLMetaElement>>
import Meta name(property) JSX.MetaHTMLAttributes<HTMLMetaElement>.name?: string | undefined="viewport" content(property) JSX.MetaHTMLAttributes<HTMLMetaElement>.content?: string | undefined="width=device-width, initial-scale=1" />
      </Head(alias) function Head(props: ComponentProps<&quot;head&quot;>): JSX.Element
import Head>
      <Body(alias) function Body(props: ComponentProps<&quot;body&quot;>): JSX.Element
import Body>
        <Suspensetracks all resources inside a component and renders a fallback until they are all resolved
```typescript
const AsyncComponent = lazy(() => import('./component'));

<Suspense fallback={<LoadingIndicator />}>
  <AsyncComponent />
</Suspense>
```

(alias) function Suspense(props: {
    fallback?: JSX.Element;
    children: JSX.Element;
}): JSX.Element
import Suspense>
          <ErrorBoundary(alias) function ErrorBoundary(props: ParentProps<{
    fallback?: ((e: any, reset: () => void) => JSX.Element) | undefined;
}>): JSX.Element
import ErrorBoundary>
            <Routes(alias) const Routes: (props: RoutesProps) => JSX.Element
import Routes>
              <FileRoutes(alias) function FileRoutes(): JSX.Element
import FileRoutes />
            </Routes(alias) const Routes: (props: RoutesProps) => JSX.Element
import Routes>
          </ErrorBoundary(alias) function ErrorBoundary(props: ParentProps<{
    fallback?: ((e: any, reset: () => void) => JSX.Element) | undefined;
}>): JSX.Element
import ErrorBoundary>
        </Suspensetracks all resources inside a component and renders a fallback until they are all resolved
```typescript
const AsyncComponent = lazy(() => import('./component'));

<Suspense fallback={<LoadingIndicator />}>
  <AsyncComponent />
</Suspense>
```

(alias) function Suspense(props: {
    fallback?: JSX.Element;
    children: JSX.Element;
}): JSX.Element
import Suspense>
        <Scripts(alias) function Scripts(): JSX.Element
import Scripts />
      </Body(alias) function Body(props: ComponentProps<&quot;body&quot;>): JSX.Element
import Body>
    </Html(alias) function Html(props: ComponentProps<&quot;html&quot;>): JSX.Element
import Html>
  );
}

tsx
export default function Rootfunction Root(): JSX.Element() {
  return (
    <Html(alias) function Html(props: ComponentProps<&quot;html&quot;>): JSX.Element
import Html lang(property) JSX.HTMLAttributes<HTMLHtmlElement>.lang?: string | undefined="en">
      <Head(alias) function Head(props: ComponentProps<&quot;head&quot;>): JSX.Element
import Head>
        <Title(alias) const Title: Component<JSX.HTMLAttributes<HTMLTitleElement>>
import Title>SolidStart App</Title(alias) const Title: Component<JSX.HTMLAttributes<HTMLTitleElement>>
import Title>
        <Meta(alias) const Meta: Component<JSX.MetaHTMLAttributes<HTMLMetaElement>>
import Meta charset(property) JSX.MetaHTMLAttributes<HTMLMetaElement>.charset?: string | undefined="utf-8" />
        <Meta(alias) const Meta: Component<JSX.MetaHTMLAttributes<HTMLMetaElement>>
import Meta name(property) JSX.MetaHTMLAttributes<HTMLMetaElement>.name?: string | undefined="viewport" content(property) JSX.MetaHTMLAttributes<HTMLMetaElement>.content?: string | undefined="width=device-width, initial-scale=1" />
      </Head(alias) function Head(props: ComponentProps<&quot;head&quot;>): JSX.Element
import Head>
      <Body(alias) function Body(props: ComponentProps<&quot;body&quot;>): JSX.Element
import Body>
        <Suspensetracks all resources inside a component and renders a fallback until they are all resolved
```typescript
const AsyncComponent = lazy(() => import('./component'));

<Suspense fallback={<LoadingIndicator />}>
  <AsyncComponent />
</Suspense>
```

(alias) function Suspense(props: {
    fallback?: JSX.Element;
    children: JSX.Element;
}): JSX.Element
import Suspense>
          <ErrorBoundary(alias) function ErrorBoundary(props: ParentProps<{
    fallback?: ((e: any, reset: () => void) => JSX.Element) | undefined;
}>): JSX.Element
import ErrorBoundary>
            <Routes(alias) const Routes: (props: RoutesProps) => JSX.Element
import Routes>
              <FileRoutes(alias) function FileRoutes(): JSX.Element
import FileRoutes />
            </Routes(alias) const Routes: (props: RoutesProps) => JSX.Element
import Routes>
          </ErrorBoundary(alias) function ErrorBoundary(props: ParentProps<{
    fallback?: ((e: any, reset: () => void) => JSX.Element) | undefined;
}>): JSX.Element
import ErrorBoundary>
        </Suspensetracks all resources inside a component and renders a fallback until they are all resolved
```typescript
const AsyncComponent = lazy(() => import('./component'));

<Suspense fallback={<LoadingIndicator />}>
  <AsyncComponent />
</Suspense>
```

(alias) function Suspense(props: {
    fallback?: JSX.Element;
    children: JSX.Element;
}): JSX.Element
import Suspense>
        <Scripts(alias) function Scripts(): JSX.Element
import Scripts />
      </Body(alias) function Body(props: ComponentProps<&quot;body&quot;>): JSX.Element
import Body>
    </Html(alias) function Html(props: ComponentProps<&quot;html&quot;>): JSX.Element
import Html>
  );
}

Usage
Setting up your application
Reference

Usage

Setting up your application

The Root component exported from root.tsx is the isomorphic (shared on server and browser) entry into your application. This is the point where the code runs on both sides. It is laid out like a typical HTML document with the exception the tags are all (capitalized) components. The core entry pieces not found in a typical HTML document are the Suspense and Error Boundaries which act as a harness for handling the loading and error states in our application.

Inside those we define our <Routes>. Keep in mind, there are no rules here in terms of where you want to place these. However, we add them by default as <Suspense> is required to do asynchronous server rendering and having <ErrorBoundary> high up in the tree is a useful catchall especially when developing. Inside the <Body> a good place to insert any Components that are shared between all pages. Things like top-level navigation. And inside this file is a good place to put any global Context Providers to inject global state into your application.

Reference

API reference for the components commonly found in root.tsx can be found in the Document section:

root.tsx

root.tsx defines the document that your application renders.

Usage

Setting up your application

Reference

`root.tsx` defines the document that your application renders.