<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;;
/* @ts-ignore */
import pkg from &quot;@vinxi/plugin-mdx&quot;;

const { default: mdx } = pkg;
export default defineConfig({
  extensions: [&quot;mdx&quot;, &quot;md&quot;],
  vite: {
    plugins: [
      mdx.withImports({})({
        jsx: true,
        jsxImportSource: &quot;solid-js&quot;,
        providerImportSource: &quot;solid-mdx&quot;
      })
    ]
  }
});
">
<input type="hidden" name="project[files][package.json]" value="{&quot;name&quot;:&quot;example-with-mdx&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;@mdx-js/mdx&quot;:&quot;^2.3.0&quot;,&quot;@solidjs/router&quot;:&quot;^0.15.0&quot;,&quot;@solidjs/start&quot;:&quot;https://pkg.pr.new/solidjs/solid-start/@solidjs/start@c2bfa86&quot;,&quot;@vinxi/plugin-mdx&quot;:&quot;^3.7.1&quot;,&quot;solid-js&quot;:&quot;^1.9.5&quot;,&quot;vinxi&quot;:&quot;^0.5.7&quot;,&quot;solid-mdx&quot;:&quot;^0.0.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/55766afb-6208-4331-9e75-e40b1f93a9f4">
<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 { 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;;

export default function App() {
  return (
    &lt;Router
      root={props =&gt; (
        &lt;main&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;/main&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 { createHandler, StartServer } from &quot;@solidjs/start/server&quot;;

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/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="import { createSignal } from &quot;solid-js&quot;;
import &quot;./Counter.css&quot;;

export default function Counter() {
  const [count, setCount] = createSignal(0);
  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/routes/%5B...404%5D.mdx]" value="import { HttpStatusCode } from &quot;@solidjs/start&quot;;

&lt;HttpStatusCode code={404} /&gt;

# Page Not Found

Visit [https://solidjs.com](https://solidjs.com) to learn how to build Solid apps.
">
<input type="hidden" name="project[files][src/routes/about.mdx]" value="import Counter from &quot;~/components/Counter&quot;;

# About
">
<input type="hidden" name="project[files][src/routes/index.mdx]" value="import Counter from &quot;~/components/Counter&quot;;

# Hello World!

&lt;Counter /&gt;

Visit [https://solidjs.com](https://solidjs.com) to learn how to build Solid apps.
">
<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-with-mdx">
</form>
<script>document.getElementById("mainForm").submit();</script>

</body></html>