<html lang="en">
<head></head>
<body>

<form id="mainForm" method="post" action="https://stackblitz.com/run" target="_self">
<input type="hidden" name="project[files][README.md]" value="# SolidStart

Everything you need to build a Solid project, powered by [`solid-start`](https://start.solidjs.com);

## Creating a project

```bash
# create a new project in the current directory
npm init solid@latest

# create a new project in my-app
npm init solid@latest my-app
```

## Developing

Once you&#39;ve created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:

```bash
npm run dev

# or start the server and open the app in a new browser tab
npm run dev -- --open
```

## Building

Solid apps are built with _presets_, which optimise your project for deployment to different environments.

By default, `npm run build` will generate a Node app that you can run with `npm start`. To use a different preset, add it to the `devDependencies` in `package.json` and specify in your `app.config.js`.
">
<input type="hidden" name="project[files][app.config.ts]" value="import { defineConfig } from &quot;@solidjs/start/config&quot;;

export default defineConfig({
  middleware: &quot;./src/middleware.ts&quot;
});
">
<input type="hidden" name="project[files][package.json]" value="{&quot;name&quot;:&quot;example-experiments&quot;,&quot;type&quot;:&quot;module&quot;,&quot;scripts&quot;:{&quot;dev&quot;:&quot;vinxi dev&quot;,&quot;build&quot;:&quot;vinxi build&quot;,&quot;start&quot;:&quot;vinxi start&quot;},&quot;dependencies&quot;:{&quot;@solidjs/meta&quot;:&quot;^0.29.4&quot;,&quot;@solidjs/router&quot;:&quot;^0.15.0&quot;,&quot;@solidjs/start&quot;:&quot;https://pkg.pr.new/solidjs/solid-start/@solidjs/start@819b35d&quot;,&quot;solid-js&quot;:&quot;^1.9.5&quot;,&quot;vinxi&quot;:&quot;^0.5.7&quot;},&quot;engines&quot;:{&quot;node&quot;:&quot;&gt;=22&quot;}}">
<input type="hidden" name="project[files][tsconfig.json]" value="{
  &quot;compilerOptions&quot;: {
    &quot;target&quot;: &quot;ESNext&quot;,
    &quot;module&quot;: &quot;ESNext&quot;,
    &quot;moduleResolution&quot;: &quot;bundler&quot;,
    &quot;allowSyntheticDefaultImports&quot;: true,
    &quot;esModuleInterop&quot;: true,
    &quot;jsx&quot;: &quot;preserve&quot;,
    &quot;jsxImportSource&quot;: &quot;solid-js&quot;,
    &quot;allowJs&quot;: true,
    &quot;strict&quot;: true,
    &quot;noEmit&quot;: true,
    &quot;types&quot;: [&quot;vinxi/types/client&quot;],
    &quot;isolatedModules&quot;: true,
    &quot;paths&quot;: {
      &quot;~/*&quot;: [&quot;./src/*&quot;]
    }
  }
}
">
<input type="hidden" name="project[files][public/favicon.ico]" value="https://pkg.pr.new/template/2eae144a-1535-4ed5-b54d-69ca8a4d7724">
<input type="hidden" name="project[files][src/app.css]" value="body {
  font-family: Gordita, Roboto, Oxygen, Ubuntu, Cantarell, &quot;Open Sans&quot;, &quot;Helvetica Neue&quot;, sans-serif;
}

a {
  margin-right: 1rem;
}

main {
  text-align: center;
  padding: 1em;
  margin: 0 auto;
}

h1 {
  color: #335d92;
  text-transform: uppercase;
  font-size: 4rem;
  font-weight: 100;
  line-height: 1.1;
  margin: 4rem auto;
  max-width: 14rem;
}

p {
  max-width: 14rem;
  margin: 2rem auto;
  line-height: 1.35;
}

@media (min-width: 480px) {
  h1 {
    max-width: none;
  }

  p {
    max-width: none;
  }
}
">
<input type="hidden" name="project[files][src/app.tsx]" value="import { MetaProvider, Title } from &quot;@solidjs/meta&quot;;
import { Router } from &quot;@solidjs/router&quot;;
import { FileRoutes } from &quot;@solidjs/start/router&quot;;
import { Suspense } from &quot;solid-js&quot;;
import &quot;./app.css&quot;;
import Provider from &quot;./components/Provider&quot;;

export default function App() {
  return (
    &lt;Router
      root={props =&gt; (
        &lt;MetaProvider&gt;
          &lt;Provider initialCount={10}&gt;
            &lt;Title&gt;SolidStart - Bare&lt;/Title&gt;
            &lt;a href=&quot;/&quot;&gt;Index&lt;/a&gt;
            &lt;a href=&quot;/about&quot;&gt;About&lt;/a&gt;
            &lt;Suspense&gt;{props.children}&lt;/Suspense&gt;
          &lt;/Provider&gt;
        &lt;/MetaProvider&gt;
      )}
    &gt;
      &lt;FileRoutes /&gt;
    &lt;/Router&gt;
  );
}
">
<input type="hidden" name="project[files][src/entry-client.tsx]" value="// @refresh reload
import { mount, StartClient } from &quot;@solidjs/start/client&quot;;

mount(() =&gt; &lt;StartClient /&gt;, document.getElementById(&quot;app&quot;)!);
">
<input type="hidden" name="project[files][src/entry-server.tsx]" value="// @refresh reload
import { StartServer, createHandler } from &quot;@solidjs/start/server&quot;;

declare module &quot;@solidjs/start/server&quot; {
  interface RequestEventLocals {
    n: number;
    s: string;
  }
}

export default createHandler(
  () =&gt; (
    &lt;StartServer
      document={({ assets, children, scripts }) =&gt; (
        &lt;html lang=&quot;en&quot;&gt;
          &lt;head&gt;
            &lt;meta charset=&quot;utf-8&quot; /&gt;
            &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot; /&gt;
            &lt;link rel=&quot;icon&quot; href=&quot;/favicon.ico&quot; /&gt;
            {assets}
          &lt;/head&gt;
          &lt;body&gt;
            &lt;div id=&quot;app&quot;&gt;{children}&lt;/div&gt;
            {scripts}
          &lt;/body&gt;
        &lt;/html&gt;
      )}
    /&gt;
  )
);
">
<input type="hidden" name="project[files][src/global.d.ts]" value="/// &lt;reference types=&quot;@solidjs/start/env&quot; /&gt;
">
<input type="hidden" name="project[files][src/middleware.ts]" value="import { createMiddleware } from &quot;@solidjs/start/middleware&quot;;

export default createMiddleware({
  onRequest: [
    event =&gt; {
      event.locals.foo = &quot;bar&quot;;
      console.log(&quot;REQUEST&quot;, event.request.url);
    }
  ],
  onBeforeResponse: [
    (event, { body }) =&gt; {
      console.log(&quot;BEFORE RESPONSE&quot;, body);
    }
  ]
});
">
<input type="hidden" name="project[files][src/components/BreaksOnServer.tsx]" value="// trouble maker
const location = window.document.location;

export default function BreaksOnServer() {
  return &lt;div&gt;Breaks on server {location.href}&lt;/div&gt;
}">
<input type="hidden" name="project[files][src/components/Counter.css]" value=".increment {
  font-family: inherit;
  font-size: inherit;
  padding: 1em 2em;
  color: #335d92;
  background-color: rgba(68, 107, 158, 0.1);
  border-radius: 2em;
  border: 2px solid rgba(68, 107, 158, 0);
  outline: none;
  width: 200px;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}

.increment:focus {
  border: 2px solid #335d92;
}

.increment:active {
  background-color: rgba(68, 107, 158, 0.2);
}">
<input type="hidden" name="project[files][src/components/Counter.tsx]" value="&quot;use client&quot;;

import { useContext } from &quot;solid-js&quot;;
import &quot;./Counter.css&quot;;
import counterContext from &quot;./counterContext&quot;;

export default function Counter() {
  const [count, setCount] = useContext(counterContext);
  return (
    &lt;button class=&quot;increment&quot; onClick={() =&gt; setCount(count() + 1)} type=&quot;button&quot;&gt;
      Clicks: {count()}
    &lt;/button&gt;
  );
}
">
<input type="hidden" name="project[files][src/components/Provider.tsx]" value="&quot;use client&quot;;
import { createSignal } from &quot;solid-js&quot;;
import counterContext from &quot;./counterContext&quot;;

export default function Provider(props) {
  return (
    &lt;counterContext.Provider value={createSignal(props.initialCount)}&gt;
      {props.children}
    &lt;/counterContext.Provider&gt;
  );
}
">
<input type="hidden" name="project[files][src/components/counterContext.tsx]" value="&quot;use client&quot;;
import { createContext, createSignal } from &quot;solid-js&quot;;

export default createContext(createSignal(0));
">
<input type="hidden" name="project[files][src/routes/(group).tsx]" value="import { RouteSectionProps } from &quot;@solidjs/router&quot;;

export default function(props: RouteSectionProps) {
  return &lt;&gt;
    &lt;h1&gt;Group&lt;/h1&gt;
    {props.children}
  &lt;/&gt;
}">
<input type="hidden" name="project[files][src/routes/(group2).tsx]" value="import { RouteSectionProps } from &quot;@solidjs/router&quot;;

export default function(props: RouteSectionProps) {
  return &lt;&gt;
    &lt;h1&gt;Group 2&lt;/h1&gt;
    {props.children}
  &lt;/&gt;
}">
<input type="hidden" name="project[files][src/routes/%5B...404%5D.tsx]" value="import { Title } from &quot;@solidjs/meta&quot;;
import { HttpStatusCode } from &quot;@solidjs/start&quot;;
import type { APIEvent } from &quot;@solidjs/start/server&quot;;


export const GET = (event: APIEvent) =&gt; {
  if (event.request.headers.get(&quot;accept&quot;) !== &quot;application/json&quot;) return;
  return { notFound: &quot;API&quot;}
};

export default function NotFound() {
  return (
    &lt;main&gt;
      &lt;Title&gt;Not Found&lt;/Title&gt;
      &lt;HttpStatusCode code={404} /&gt;
      &lt;h1&gt;Page Not Found&lt;/h1&gt;
      &lt;p&gt;
        Visit{&quot; &quot;}
        &lt;a href=&quot;https://start.solidjs.com&quot; target=&quot;_blank&quot;&gt;
          start.solidjs.com
        &lt;/a&gt;{&quot; &quot;}
        to learn how to build SolidStart apps.
      &lt;/p&gt;
    &lt;/main&gt;
  );
}
">
<input type="hidden" name="project[files][src/routes/api.ts]" value="export function GET() {
  return &quot;hello world&quot;;
}

export function DELETE() {
  console.log(&quot;Deleted&quot;);
}
">
<input type="hidden" name="project[files][src/routes/index.tsx]" value="import { Title } from &quot;@solidjs/meta&quot;;
import { json } from &quot;@solidjs/router&quot;;
import { clientOnly, GET } from &quot;@solidjs/start&quot;;
import { getServerFunctionMeta } from &quot;@solidjs/start/server&quot;;
import { getRequestEvent } from &quot;solid-js/web&quot;;
import Counter from &quot;~/components/Counter&quot;;
const BreaksOnServer = clientOnly(() =&gt; import(&quot;~/components/BreaksOnServer&quot;));

const hello = GET(async (name: string) =&gt; {
  &quot;use server&quot;;
  const e = getRequestEvent()!;
  const { id } = getServerFunctionMeta()!;
  console.log(&quot;ID&quot;, id, e.locals.foo);
  return json(
    { hello: new Promise&lt;string&gt;(r =&gt; setTimeout(() =&gt; r(name), 1000)) },
    { headers: { &quot;cache-control&quot;: &quot;max-age=60&quot; } }
  );
});

export default function Home() {
  hello(&quot;John&quot;).then(async v =&gt; {
    console.log(v);
    console.log(await v.hello);
  });
  fetch(`http://localhost:3000/${import.meta.env.SERVER_BASE_URL}/unknown`, {
    headers: { Accept: &quot;application/json&quot; }
  }).then(async res =&gt; console.log(await res.json()));
  return (
    &lt;main&gt;
      &lt;Title&gt;Hello World&lt;/Title&gt;
      &lt;h1&gt;Hello world!&lt;/h1&gt;
      &lt;Counter /&gt;
      &lt;BreaksOnServer /&gt;
      &lt;p&gt;
        Visit{&quot; &quot;}
        &lt;a href=&quot;https://start.solidjs.com&quot; target=&quot;_blank&quot;&gt;
          start.solidjs.com
        &lt;/a&gt;{&quot; &quot;}
        to learn how to build SolidStart apps.
      &lt;/p&gt;
    &lt;/main&gt;
  );
}
">
<input type="hidden" name="project[files][src/routes/test.tsx]" value="import { RouteSectionProps } from &quot;@solidjs/router&quot;;

export default function (props: RouteSectionProps) {
  return (
    &lt;&gt;
      &lt;h1&gt;Layout&lt;/h1&gt;
      {props.children}
    &lt;/&gt;
  );
}
">
<input type="hidden" name="project[files][src/routes/漢字.tsx]" value="export default function() {
  return &lt;section&gt;漢字&lt;/section&gt;
}">
<input type="hidden" name="project[files][src/routes/(group)/endpoint.ts]" value="export function GET() {
  return new Response(&quot;Hello World&quot;);
}
">
<input type="hidden" name="project[files][src/routes/(group)/other.tsx]" value="export default function() {
  return &lt;section&gt;OTHER&lt;/section&gt;
}">
<input type="hidden" name="project[files][src/routes/(group2)/something.tsx]" value="export default function() {
  return &lt;section&gt;SOMETHING&lt;/section&gt;
}">
<input type="hidden" name="project[files][src/routes/%5B%5Boption%5D%5D/thing.tsx]" value="import type { RouteSectionProps } from &quot;@solidjs/router&quot;;

export default function(props: RouteSectionProps) {
  return &lt;section&gt;THING: {props.params.option || &quot;NO&quot;}&lt;/section&gt;
}">
<input type="hidden" name="project[files][src/routes/test/(hi).tsx]" value="export default function() {
  return &lt;section&gt;CONTENT&lt;/section&gt;
}">
<input type="hidden" name="project[files][src/routes/test/%5Bname%5D.tsx]" value="import { RouteSectionProps } from &quot;@solidjs/router&quot;;

export default function(props: RouteSectionProps) {
  return &lt;section&gt;{props.params.name}&lt;/section&gt;
}">
<input type="hidden" name="project[files][src/routes/test(named)/%5Bname%5D.tsx]" value="import { RouteSectionProps } from &quot;@solidjs/router&quot;;

export default function (props: RouteSectionProps) {
  return (
    &lt;&gt;
      &lt;h1&gt;Different Layout&lt;/h1&gt;
      {props.children}
    &lt;/&gt;
  );
}
">
<input type="hidden" name="project[files][src/routes/test(nolayout)/nolayout.tsx]" value="export default function () {
  return &lt;h1&gt;Without Layout&lt;/h1&gt;;
}
">
<input type="hidden" name="project[files][src/routes/api/hello/%5Bname%5D.ts]" value="import type { APIHandler } from &quot;@solidjs/start/server&quot;;

export const GET: APIHandler = async ({ params }) =&gt; {
  return `Hello ${params.name}!`;
};">
<input type="hidden" name="project[files][src/routes/test(named)/%5Bname%5D/home.tsx]" value="export default function() {
  return &lt;section&gt;DIFFERENT CONTENT&lt;/section&gt;
}">
<input type="hidden" name="project[description]" value="generated by https://pkg.pr.new">
<input type="hidden" name="project[template]" value="node">
<input type="hidden" name="project[title]" value="example-experiments">
</form>
<script>document.getElementById("mainForm").submit();</script>

</body></html>