The code
Three files, exactly what you get in the editor.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Solid starter</title>
</head>
<body>
<div id="app"></div>
</body>
</html>
:root {
font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
line-height: 1.5;
font-weight: 400;
color-scheme: light dark;
color: rgba(255, 255, 255, 0.87);
background-color: #242424;
-webkit-font-smoothing: antialiased;
}
body {
margin: 0;
display: flex;
place-items: center;
min-width: 320px;
min-height: 100vh;
}
a {
font-weight: 500;
color: #446b9e;
text-decoration: inherit;
}
a:hover {
text-decoration: underline;
}
h1 {
font-size: 3.2em;
line-height: 1.1;
margin: 0.4em 0;
}
code {
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 0.9em;
}
button {
border-radius: 8px;
border: 1px solid transparent;
padding: 0.6em 1.2em;
font-size: 1em;
font-weight: 500;
font-family: inherit;
background-color: #1a1a1a;
cursor: pointer;
transition: border-color 0.25s;
}
button:hover {
border-color: #446b9e;
}
button:focus-visible {
outline: 4px auto -webkit-focus-ring-color;
}
#app,
.app {
max-width: 1280px;
margin: 0 auto;
padding: 2rem;
text-align: center;
}
.logo {
height: 6em;
padding: 1.5em;
will-change: filter;
transition: filter 300ms;
}
.logo:hover {
filter: drop-shadow(0 0 2em #446b9eaa);
}
.card {
padding: 2em;
}
.hint {
color: #888;
}
@media (prefers-color-scheme: light) {
:root {
color: #213547;
background-color: #ffffff;
}
button {
background-color: #f9f9f9;
}
}
import { createSignal } from "https://esm.sh/solid-js@1";
import { render } from "https://esm.sh/solid-js@1/web";
import html from "https://esm.sh/solid-js@1/html";
function App() {
const [count, setCount] = createSignal(0);
return html`
<div class="app">
<a href="https://www.solidjs.com" target="_blank">
<svg class="logo" role="img" viewBox="0 0 128 128">
<defs>
<linearGradient
id="a"
x1="27.5"
x2="152"
y1="3"
y2="63.5"
gradientTransform="translate(-3.22 1.507) scale(.80503)"
gradientUnits="userSpaceOnUse"
>
<stop offset=".1" stop-color="#76b3e1" />
<stop offset=".3" stop-color="#dcf2fd" />
<stop offset="1" stop-color="#76b3e1" />
</linearGradient>
<linearGradient
id="b"
x1="95.8"
x2="74"
y1="32.6"
y2="105.2"
gradientTransform="translate(-3.22 1.507) scale(.80503)"
gradientUnits="userSpaceOnUse"
>
<stop offset="0" stop-color="#76b3e1" />
<stop offset=".5" stop-color="#4377bb" />
<stop offset="1" stop-color="#1f3b77" />
</linearGradient>
<linearGradient
id="c"
x1="18.4"
x2="144.3"
y1="64.2"
y2="149.8"
gradientTransform="translate(-3.22 1.507) scale(.80503)"
gradientUnits="userSpaceOnUse"
>
<stop offset="0" stop-color="#315aa9" />
<stop offset=".5" stop-color="#518ac8" />
<stop offset="1" stop-color="#315aa9" />
</linearGradient>
<linearGradient
id="d"
x1="75.2"
x2="24.4"
y1="74.5"
y2="260.8"
gradientTransform="translate(-3.22 1.507) scale(.80503)"
gradientUnits="userSpaceOnUse"
>
<stop offset="0" stop-color="#4377bb" />
<stop offset=".5" stop-color="#1a336b" />
<stop offset="1" stop-color="#1a336b" />
</linearGradient>
</defs>
<path
fill="#76b3e1"
d="M128 29.683S85.333-1.713 52.327 5.532l-2.415.805c-4.83 1.61-8.855 4.025-11.27 7.245l-1.61 2.415-12.076 20.931 20.93 4.025c8.856 5.636 20.127 8.05 30.592 5.636l37.031 7.245z"
/>
<path
fill="url(#a)"
d="M128 29.683S85.333-1.713 52.327 5.532l-2.415.805c-4.83 1.61-8.855 4.025-11.27 7.245l-1.61 2.415-12.076 20.931 20.93 4.025c8.856 5.636 20.127 8.05 30.592 5.636l37.031 7.245z"
opacity=".3"
/>
<path
fill="#518ac8"
d="m38.642 29.683-3.22.805C21.735 34.513 17.71 47.394 24.955 58.664c8.05 10.465 24.956 16.1 38.641 12.076l49.912-16.906S70.843 22.438 38.642 29.683z"
/>
<path
fill="url(#b)"
d="m38.642 29.683-3.22.805C21.735 34.513 17.71 47.394 24.955 58.664c8.05 10.465 24.956 16.1 38.641 12.076l49.912-16.906S70.843 22.438 38.642 29.683z"
opacity=".3"
/>
<path
fill="url(#c)"
d="M104.654 65.91a36.226 36.226 0 0 0-38.641-12.076L16.1 69.934 0 98.111l90.164 15.295 16.1-28.981c3.22-5.635 2.415-12.075-1.61-18.516z"
/>
<path
fill="url(#d)"
d="M88.553 94.085A36.226 36.226 0 0 0 49.912 82.01L0 98.11s42.667 32.202 75.673 24.152l2.415-.806c13.686-4.025 18.516-16.905 10.465-27.37z"
/>
</svg>
</a>
<h1>Hello Solid!</h1>
<div class="card">
<button onClick=${() => setCount(count() + 1)}>count is ${count}</button>
<p>Edit <code>script.js</code> and watch the preview update.</p>
</div>
<p class="hint">
Check out the <a href="https://docs.solidjs.com" target="_blank">Solid docs</a> to learn
more.
</p>
</div>
`;
}
render(App, document.getElementById("app"));
Questions
Can I use Solid without a build step?
Yes. This starter loads Solid straight from a CDN, so it runs in the browser with no npm install, bundler, or config.
How do I start a Solid project online?
Click Open in editor. HTMLDrop copies this starter into a new drop with index.html, style.css, and script.js, and the preview updates as you edit.
Is it free?
Yes. Public drops, live collaboration, versions, and embeds are free, and you do not need an account to start.
Can I share or embed my Solid demo?
Yes. Every drop gets a public link and an embed code, and you can invite others to edit it with you in real time.