SolidJS — guide & examples
VDOM-free SolidJS playground with signals, JSX via Babel preset, and live preview directly in the browser.
About SolidJS
VDOM-free SolidJS playground with signals, JSX via Babel preset, and live preview directly in the browser.
Runtime: v1.9.14
Features
- SolidJS 1.9 Support
- Signals & Computations
- Babel Solid Preset
- Reactive Components
- Live Preview
- Lightweight Runtime
Browser playground limits
- • Code runs in a sandboxed browser preview, without Node.js, a backend, or private environment variables.
- • The Console prompt can inspect browser globals and the rendered DOM, but not variables scoped inside ES modules or component state.
- • Download the project when you need build plugins, server APIs, native modules, or a production dependency workflow.
How to use the SolidJS playground
- Edit a source file from the project explorer — the live preview recompiles automatically.
- Add, rename, duplicate or delete project files as needed. Update affected imports after renaming or moving a file.
- Use the console for logs and errors, and Format to tidy the active file.
- Share the complete project or download a Vite project ZIP with its source files and package.json.
Editing
Select next occurrenceCtrl / ⌘+D
Delete lineCtrl / ⌘+Shift+K
Move line up / downAlt+↑ / ↓
Copy line up / downAlt+Shift+↑ / ↓
Navigation
Go to symbolCtrl / ⌘+Shift+O
Selection
Select all occurrencesCtrl / ⌘+Shift+L
Terminal
Interrupt / kill processCtrl+C
Send EOF (close stdin)Ctrl+D
Console shortcuts
Press Enter to evaluate, ↑ and ↓ to browse command history, and Ctrl/⌘ + L to clear the console.
import { render } from 'solid-js/web'
import App from './App'
import './styles.css'
const root = document.getElementById('root')
if (!root) {
throw new Error('App target was not found')
}
render(() => <App />, root)
import { createSignal } from 'solid-js'
import { CounterCard } from './components/CounterCard'
export default function App() {
const [count, setCount] = createSignal(0)
return (
<main class="app-shell">
<p class="eyebrow">SolidJS 1.9 · TypeScript + JSX</p>
<h1>Build with fine-grained reactivity</h1>
<p class="intro">
This playground compiles Solid JSX, TypeScript, signals, CSS, and local
component imports directly in your browser.
</p>
<CounterCard
count={count()}
onIncrement={() => setCount((value) => value + 1)}
/>
</main>
)
}
Frequently asked questions
- Is the SolidJS playground free?
- Yes. The SolidJS playground is completely free with no sign-up — write, run and share SolidJS code in your browser.
- Do I need to install anything to run SolidJS online?
- No. The live preview compiles and runs in your browser. After downloading the project, install its dependencies before running it locally.
- Can I share or export my SolidJS code?
- Yes. Share creates a link to your project. Download exports a Vite project ZIP with its source files and package.json.
- Does the editor support autocomplete and live preview?
- It does — a Monaco-powered editor with autocomplete and formatting, a live preview that updates as you type, and a console for logs and errors.
compilebytes.com/tools/solid