Welcome to Spinini
Spinini is a browser-based coding platform — build, run, and deploy web apps without installing anything. This guide walks you through everything from creating your first project to publishing it live.
1. Create an Account
Head to spinini.com and sign up for free. You get 100 AI credits per month with no credit card required. OAuth with Google or GitHub is the fastest way to get started.
2. Create Your First Project
After logging in, you land on the Dashboard. Click New Project and choose a template:
- Node.js — Express APIs, scripts, backend services
- React — Client-side apps with Vite
- Next.js — Full-stack React with SSR
- Python — Scripts, data pipelines, CLIs
- Flask — Python web apps
- HTML — Static sites, landing pages
Give your project a name and click Create. Your project opens instantly in the editor.
3. The Editor
The Spinini editor has four main areas:
Left sidebar — switch between:
- 🤖 AI Agent — describe what to build, watch it get built
- 📁 Files — browse and manage your project files
- 🔍 Search — find text across all files
- 📦 Packages — install npm/pip packages
- 🔒 Secrets — manage environment variables safely
- 🔀 Git — version control
Main editor — Monaco (the same engine powering VS Code). Syntax highlighting, autocomplete, and multi-tab editing.
Preview pane — live preview of your running app. Auto-reloads when you save files.
Terminal — full shell access to your container. Run commands, check logs, debug in real time.
4. Your First App
Click Files in the sidebar to see the starter file created for you. For a Node.js project, it's index.js:
const http = require('http')
const PORT = process.env.PORT || 3000
http.createServer((req, res) => {
res.writeHead(200, { 'Content-Type': 'text/html' })
res.end('<h1>Hello from Spinini!</h1>')
}).listen(PORT, () => console.log(`Running on port ${PORT}`))The preview pane on the right shows your app running live. Edit the file, save with Ctrl+S, and the preview reloads automatically.
5. Using the AI Agent
The AI Agent is your pair programmer. Click AI Agent in the sidebar and describe what you want:
> "Add a REST API with three routes: GET /users, POST /users, DELETE /users/:id. Store users in memory."
The agent writes the code file by file, runs install commands if needed, and shows its work in real time. When it's done, your app is already running.
Tips:
- Be specific: "Build a React counter app with increment, decrement, and reset buttons" works better than "Build a counter"
- The agent can read your existing files — tell it what to change
- Use Plan mode for complex tasks to see the agent's plan before it starts
6. Install Packages
Click Packages in the sidebar, search for any npm or pip package, and click Install. Or just open the terminal and run:
npm install express cors dotenvThe package installs in your container's environment, separate from every other project.
7. Add Environment Variables
Store API keys and secrets in Secrets (not in your code). They become environment variables automatically:
const apiKey = process.env.MY_API_KEYSecrets are encrypted at rest and never visible in your code or preview URLs.
8. Publish Your App
When you're ready to share, click Publish in the top-right. Your app gets a permanent public URL:
https://my-project.spinini.comThe container keeps running, restarts automatically if it crashes, and responds to real traffic. To take it offline, click Unpublish.
9. Custom Domain
On paid plans, you can connect your own domain. Go to the Deploy panel, enter your domain (e.g. myapp.com), and follow the DNS instructions. We handle HTTPS automatically via Let's Encrypt.
Next Steps
- Read How to build a full-stack app in 10 minutes
- Explore the AI Agent guide
- Check pricing — the free plan is generous