Build your first app
Connect Startpod to an editor, process log, and preview frame.
A useful Startpod product usually connects three pieces of UI to one pod: an editor, a process log or terminal, and a preview.
Read and edit a file
Load the current text when the editor opens:
const source = await startpod.fs.readFile("index.html", "utf8")
editor.setValue(source)Write changes back to the virtual filesystem:
editor.onDidChange(async (value) => {
await startpod.fs.writeFile("index.html", value)
})Development servers observe filesystem changes, so Vite can update the preview without a restart.
Stream process output
Every process exposes a standard ReadableStream<string>:
async function appendOutput(process: StartpodProcess) {
const reader = process.output.getReader()
while (true) {
const { value, done } = await reader.read()
if (done) return
terminal.write(value)
}
}
const process = await startpod.spawn("npm", ["run", "dev"])
void appendOutput(process)Use process.input when the command accepts stdin, and process.kill() when the user stops it.
Keep the preview current
Mount the managed preview before starting the development server:
startpod.mountPreview(document.querySelector("#preview")!)Clean up
process.kill()
startpod.unmountPreview()
startpod.teardown()The next sections cover each integration in more depth, starting with files and projects.