# Devmachinist documentation URL: https://devmachinist.com/docs/ # Devmachinist documentation Devmachinist is a website and app builder that runs in your browser — on a phone, a tablet or a laptop. Every project is a **real React + Tailwind CSS project** (built with Vite), not a locked page format: you can edit it visually, change the code, install npm packages, and export or publish it. ## What you can build - **Websites and landing pages** with a visual page builder and over 100 ready-made components. - **Web apps** with a built-in API builder: data models, sign-in, file storage and Stripe payments. - **Online stores** from the e-commerce template, paid into your (or your client's) Stripe account. - **Android, Windows and Linux apps** exported from the same project. ## Where to start 1. [Getting started](/docs/getting-started) — create an account and your first project. 2. [The builder](/docs/builder) — pages, components, the live preview. 3. [Publishing](/docs/publishing) — put a site online. ## All topics | Topic | What it covers | |---|---| | [Component library](/docs/library) | 100+ built-in components, your own library, the Shop | | [Code editor & files](/docs/editor) | Editing code, packages, uploads, git | | [Hosting on other providers](/docs/hosting) | Cloudflare, Vercel, Netlify, GitHub Pages, GoDaddy, VPS | | [API builder](/docs/api-builder) | Data, sign-in, storage and the generated client | | [Payments & stores](/docs/payments) | Stripe checkout, Connect onboarding, developer fees | | [Shop](/docs/shop) | Buying and selling templates and components | | [AI](/docs/ai) | Generating and fixing components with AI | | [Teams](/docs/teams) | Sharing projects, issues, messages | | [Native apps](/docs/native-apps) | Android and desktop exports | | [Agents & MCP](/docs/agents) | Access tokens and the MCP server for AI agents | | [Security](/docs/security) | Multiple sign-in passwords, sessions, support PIN | | [Plans & billing](/docs/billing) | Trial, Pro plan, payouts | --- # Getting started URL: https://devmachinist.com/docs/getting-started # Getting started ## 1. Create an account Sign up with your email and a password. A quick robot check runs in your browser — tick **I'm not a robot**. You get a free trial with previews, publishing and hosting included. ## 2. Create a project From the dashboard choose **New project** and pick a starting point: - **Blank** — an empty site, optionally with sign-in already wired up. - **E-commerce** — a store with products, cart, checkout and orders, plus customer sign-in and an admin portal at `#admin` for managing products and orders. - **Blog** — articles with a reading page and an admin portal at `#admin` with a Markdown editor, drafts and publishing. Visitors never see drafts, not on the site and not through the API. - **Component library** — a project for building and selling reusable components. ## 3. Open the builder Press **Open builder**. The builder has six tabs along the bottom: | Tab | Use it to | |---|---| | Preview | See the running site, switch between phone, tablet and desktop widths | | Page | Arrange the components on a page visually, or edit the page's code | | Library | Browse your project's components and the built-in library | | Files | Browse, edit and upload any file in the project | | API | Build the data, sign-in and payments behind your app | | More | Publish, pages, packages, git, AI settings and app exports | ## 4. Publish When it looks right, go to **More → Publish**. Your site gets a public address straight away. See [Publishing](/docs/publishing). > Your work in the builder stays private until you publish. Previews are only visible to you and your team. --- # The builder URL: https://devmachinist.com/docs/builder # The builder The builder edits a real Vite + React + Tailwind CSS v4 project. What you see in the preview is your project running — with your npm packages, your Tailwind setup and hot reloading on every save. ## Live preview Press **Start Vite** (or ▶ in the header) to start the project's preview. It runs in a private sandbox and is only visible to you and people on your team. Switch between phone, tablet and desktop widths with the buttons in the header. ## Pages A project can have any number of pages. Each page is a component in `src/pages/`, reached with hash links like `/#/about`. Add, rename and reorder pages under **More → Pages**; switch the page you are working on from the page picker in the header. ## The Page tab - **Build** shows the page live. Tap an element to select it; long-press for actions (move, duplicate, remove, edit). - **Structure** shows the page's component tree — reorder by moving items up and down. - **Code** opens the page's source in the [code editor](/docs/editor). Use **+ add** to insert a component from your project or from the [library](/docs/library) at any position. ## Components Components live in `src/components/`. Each card in the Library tab shows a live preview; **edit** opens its code, **+** adds it to the current page. Files on disk are always the source of truth — the builder never overwrites your edits. ## Themes The builder follows your device's light or dark mode; the ◐ button switches between system, light and dark. --- # Component library URL: https://devmachinist.com/docs/library # Component library Devmachinist ships with **over 100 production-ready components**, all React + Tailwind CSS with no extra packages. Each one renders with realistic sample content and takes props so you can replace it with your own. ## Categories | Category | Examples | |---|---| | Marketing | Heroes, navbars, feature grids, bento grid, logo clouds, testimonials, pricing tables, calls to action, footers, contact sections | | App UI | KPI cards, data tables, charts, kanban board, calendar, settings, user tables | | Feedback & navigation | Alerts, toasts, modal, drawer, empty states, tabs, breadcrumbs, pagination, accordion, stepper, command palette | | Forms | Sign-up with password strength, login, contact, newsletter, search with suggestions, file drop zone | | Commerce | Product grid and detail, cart drawer, order summary, reviews, wishlist, promo countdown | | Content | Blog grid and article layout, team, job listings, timeline, roadmap, changelog, galleries, FAQ, 404, coming soon, cookie banner | ## Using a component Open the **Library** tab → **Library**, find a component (search or browse by folder) and press **+**. It is copied into your project's `src/components/` so you can change it freely, and its import is added for you. ## Your own library Upload `.jsx`/`.tsx` files or whole folders, or paste JSX, to build a personal library you can reuse across projects. Library files can import npm packages installed in the project. ## The Shop Find more templates, components and libraries — free and paid — in the [Shop](/docs/shop). --- # Code editor & files URL: https://devmachinist.com/docs/editor # Code editor & files ## The editor Open any file from the Files tab, or **edit** on a component. The editor understands JSX, TypeScript, CSS (including Tailwind v4 at-rules), JSON, HTML and Markdown, and helps as you type: - Component suggestions while you type `` with the value shown. This proves you own the domain. - **A** (and **AAAA**, if shown) pointing the domain at the server. For a subdomain you can use a **CNAME** to the sites host instead. 3. Press **Check DNS**. New records can take from a few minutes to an hour to show up. The app also checks again every 10 minutes for three days. Once both records check out, the domain shows **Connected**. Let’s Encrypt issues the certificate on the first visit, under your account email, and it renews automatically. On Cloudflare, set the A record to **DNS only** (grey cloud) until the certificate is issued. Each domain is one address. To serve both `example.com` and `www.example.com`, add each one. You can connect up to 10 domains per account. You can also deploy the project to any static host yourself. See [Hosting on other providers](/docs/hosting). ## Security Published sites are served from their own host, separate from your account, and never receive your session — so code on a published site can't act as you. --- # Hosting on other providers URL: https://devmachinist.com/docs/hosting # Hosting on other providers Every Devmachinist project is a standard **Vite + React** app, so besides [publishing on Devmachinist](/docs/publishing) you can host it anywhere that serves static files — and put it on your own domain. ## 1. Get the code out - **Git (recommended):** in the builder open **More → Git**, commit, add a remote (for example a new empty GitHub repository) and **Push**. Most hosts then build and redeploy automatically on every push. - **Build it yourself:** clone the repository on your computer and run `npm install && npm run build`. The finished site is in `dist/`. ## 2. Build settings (the same everywhere) | Setting | Value | |---|---| | Install command | `npm install` | | Build command | `npm run build` | | Output directory | `dist` | | Node.js version | 20 or newer | Pages use hash links (`/#/about`), so **no redirect or rewrite rules are needed** — any static host works. ## 3. Keep your data and sign-in working If the project uses the [API builder](/docs/api-builder) (data, sign-in, checkout), tell the site where the API lives. Add this line inside `` in `index.html`, **before** the main script: ```html ``` Your data stays on Devmachinist and the API accepts requests from any domain. For stores, set **Store URL** in API → Payments to your new address so Stripe sends shoppers back to the right site. ## Cloudflare Pages 1. In the Cloudflare dashboard: **Workers & Pages → Create → Pages → Connect to Git** and pick your repository. 2. Framework preset **Vite** (or enter the build settings above). Save and deploy. 3. **Custom domains → Set up a domain.** If your domain's DNS is on Cloudflare, it's configured for you; otherwise add the CNAME it shows. No Git? **Upload assets** and drag in your `dist` folder. ## Vercel 1. **Add New → Project**, import your Git repository. 2. Vercel detects Vite; confirm build `npm run build` and output `dist`. Deploy. 3. **Settings → Domains → Add.** Point your domain with the A record (`76.76.21.21`) or CNAME (`cname.vercel-dns.com`) Vercel shows. ## Netlify 1. **Add new site → Import an existing project**, choose your repository. 2. Build command `npm run build`, publish directory `dist`. Deploy. 3. **Domain management → Add a domain** and follow the DNS instructions. Or drag the `dist` folder onto **Sites → Deploy manually**. ## GitHub Pages 1. In the repository: **Settings → Pages → Source: GitHub Actions**, and choose the **Static HTML** workflow, or add a workflow that runs `npm ci && npm run build` and uploads `dist`. 2. If the site lives at `username.github.io/repo/`, open `vite.config.js` in the project and set `base: '/repo/'` (not needed with a custom domain). 3. Add your domain under **Settings → Pages → Custom domain**. ## GoDaddy GoDaddy can host the files or just point your domain at another host. **Point a GoDaddy domain at Cloudflare, Vercel or Netlify** (recommended): in GoDaddy open **My Products → your domain → DNS** and add the record your host gives you — usually an **A** record for `@` and a **CNAME** for `www`. Changes take minutes to a few hours. **Host on GoDaddy Web Hosting (cPanel):** 1. Build the site (`npm run build`). 2. In cPanel open **File Manager → public_html** (delete the placeholder `index.html`). 3. Upload everything *inside* `dist/` (not the folder itself), or upload a zip and **Extract**. 4. Turn on HTTPS under **SSL/TLS Status** (free with most plans). Repeat steps 1–3 to update the site. ## Your own server (VPS) Any Linux server with a web server works. With **Caddy** (automatic HTTPS): ```bash # on your computer npm run build && rsync -av --delete dist/ user@your-server:/var/www/my-site/ ``` ```text # /etc/caddy/Caddyfile on the server example.com { root * /var/www/my-site file_server encode gzip } ``` Then `sudo systemctl reload caddy`. With **nginx**, point `root` at the same folder in a `server` block and add a certificate with `certbot --nginx`. Point your domain at the server with an **A** record for `@` (and `www`) set to its IP address. ## Updating With Git, keep working in Devmachinist and **Push** — Cloudflare, Vercel, Netlify and GitHub Pages rebuild automatically. For uploads (GoDaddy, VPS) build and upload again. --- # API builder URL: https://devmachinist.com/docs/api-builder # API builder The **API** tab builds the backend for your app without writing a server. ## Models and data Create models (for example `Product`, `Order`) with typed fields — text, numbers, booleans, dates, enums, references to other models. Each model gets REST endpoints automatically, backed by a built-in SQLite database. Browse and edit rows under **Data**. ## Sign-in Under **Auth**, turn on email and password sign-in (plus external providers). Set access rules per model: public, signed-in users, the record's owner only, admins only, or builder-only. Admins can see and change every record, even under owner-only rules. The generated client gives your pages a ready-made `AuthProvider`, `useAuth()`, a login form and ``/`` wrappers. ## Users and admins **Auth → Users** lists everyone who has signed up to your app. Here you can add accounts, reset passwords, delete users, and make someone an **admin** or take admin access away. Role changes apply immediately, even to people who are already signed in. Templates with an admin portal (E-commerce and Blog) create your first admin when the project is made. It uses your account email and a generated password. Auth → Users shows that password until you change it. ## Files and storage Store uploads and blobs per API, served from your app's API address. ## Using it in your app **Use in app** generates a JavaScript client in `src/api/` and can add bound components (lists, forms, detail views) to your project. Native apps exported from the project call the same API. ## Payments Stores take payments through Stripe — see [Payments & stores](/docs/payments). ## Endpoints Every API is available at `/_api//…` on the Devmachinist server. **Docs** shows the OpenAPI description and example requests. --- # Payments & stores URL: https://devmachinist.com/docs/payments # Payments & stores Stores built on the API builder (like the e-commerce template) take real payments with **Stripe Checkout**, paid into the store owner's own Stripe account — yours or your client's. ## Two ways to connect Stripe Open **API → Payments**: - **Stripe Connect (recommended)** — create an onboarding link and open it yourself or send it to your client. They sign up or sign in to Stripe in a few minutes; no keys to copy. The link stays valid for 14 days and only ever controls its own account. - **Your own keys** — paste the store's Stripe secret key and add the webhook shown. Prices always come from the server, so shoppers can't change what they pay. Orders are marked paid only when Stripe confirms the payment. Refunds made in Stripe update the order automatically. ## Developer fees If you build stores for clients, you can take a percentage of each sale (up to 20%). Set **Your fee** in API → Payments. The store owner agrees to it during onboarding — or later through an approval email sent only to their Stripe account's address. Without their consent no fee is taken. Your share is paid out to your Devmachinist payout account; see **Earnings** in the account menu. Full refunds return the fee too. ## Native apps For Android and desktop apps, set the **Store URL** so Stripe can return shoppers to your store after payment. --- # Shop URL: https://devmachinist.com/docs/shop # Shop The Shop is a marketplace for **templates, components, libraries and modules** made with Devmachinist. ## Buying and installing Browse free and paid items, see a live demo, and press **Get** or **Buy**. Paid items go through Stripe Checkout. Installing copies the files into your own project or library — nothing is ever overwritten without asking, and you can change everything you install. ## Selling Open **Sell** in the account menu: 1. Set up payouts with Stripe (identity checks, tax details and payouts are handled by Stripe). 2. Choose what to sell — a project as a template, components, a library or a module — and set a price (or free). 3. Submit. Listings are reviewed before they go live; new versions can be submitted any time. Each paid sale goes to your Stripe account minus the platform fee (10% by default). Sales and refunds appear in your seller dashboard. --- # AI URL: https://devmachinist.com/docs/ai # AI Devmachinist can generate components, fix errors and rewrite code with AI. It knows your project: its components (and how to import them) and installed packages. ## Where to use it - **Generate a component** from a description in the Library tab. - In the [code editor](/docs/editor), the **AI** panel edits, fixes or rewrites the open file. Output is checked before it reaches your project; broken code is repaired automatically once. ## Providers A free built-in model (Google Gemini) works out of the box. In **More → AI** you can choose another provider — Anthropic, OpenAI, Groq, OpenRouter, Mistral, DeepSeek, xAI, Together — or any OpenAI-compatible endpoint, pick a model, and add your own API key. Your key is encrypted on the server and never shown again. --- # Teams & collaboration URL: https://devmachinist.com/docs/teams # Teams & collaboration ## Teams Create a team, invite people by email, and give them a role: owner, admin or member. Share projects with the team — teammates can open them in the builder, preview and publish them. Only the project's owner can archive it. ## Issues and comments Each project has numbered **issues** for bugs and tasks. Assign them, comment, and **@mention** people to notify them. Your assigned issues show on the dashboard. ## Messages and notifications Message teammates directly or in team channels. Notifications and messages arrive live (the bell in the header); you can also get them by email. ## Developer profile Your public profile at `/#/u/` shows your headline, skills and published work. You can make it private under **Account → Developer profile**. --- # Native apps URL: https://devmachinist.com/docs/native-apps # Native apps Any project can become an **Android app** or a **desktop app for Windows and Linux**. Open **More → Publish** and choose Android or Desktop. ## What you get A zip with a complete native project: - **Android** — a Capacitor project. Open it in Android Studio, or push it to GitHub: the included workflow builds the APK for you. - **Desktop** — an Electron project with installers for Windows (setup and portable `.exe`) and Linux (AppImage and `.deb`), built by the included GitHub workflow. Choose **Bundle this build** (the app contains your site) or **Load published site** (the app shows your latest publish — no rebuild needed for updates). Either way the app talks to your live [API](/docs/api-builder). ## Icon and permissions Pick a square PNG icon (1024×1024 is best) and the permissions the app may ask for: camera, microphone, location, notifications, photos, clipboard, vibration. The user is asked the first time each is used; anything you didn't tick is refused. The desktop app grants them only to your own site. ## Security The desktop app runs your site with Node.js disabled, context isolation and the renderer sandbox on; links to other sites open in the browser. --- # Agents & MCP URL: https://devmachinist.com/docs/agents # Agents & MCP AI agents — Claude, Cursor, or any MCP client — can build in Devmachinist on your behalf. ## Access tokens Create a **personal access token** under **Account → Access tokens**. Choose its scopes: | Scope | Allows | |---|---| | read | Reading projects, files and the library | | write | Changing files, components and pages | | preview | Starting and stopping previews | | publish | Publishing and native app exports | You can limit a token to specific projects and give it an expiry. Tokens never reach your account settings, billing or passwords, and you can revoke them at any time. ## MCP server Point your MCP client at `POST /api/mcp` on your Devmachinist server with the token as a Bearer token. The tools mirror the REST API (list projects, read and write files, add components, start previews, publish). `GET /api/agent` describes every tool and its REST equivalent. ```json { "mcpServers": { "devmachinist": { "url": "https://devmachinist.com/api/mcp", "headers": { "Authorization": "Bearer dm_pat_…" } } } } ``` --- # Security & your account URL: https://devmachinist.com/docs/security # Security & your account ## Multiple sign-in passwords Under **Account → Security** you can require up to **five passwords**, entered one after another, to sign in. A wrong password at any step starts the sequence over. Changing the sequence needs all your current passwords and signs out your other devices. ## Robot check Sign-up and every sign-in step include a quick robot check that runs in your browser — no third-party tracking. It gets slower after failed attempts. ## Sign-in alerts Several wrong passwords for your account within an hour trigger an email and a notification, with where the attempts came from and how far they got. Recent failed attempts are listed under Account → Security. ## Sessions A sign-in lasts **one month** and then ends — it is never extended. **Sign out of all devices** ends every session immediately. ## Support PIN Your account has a 6-digit **support PIN** under Account → Security. Nobody at support can see it. Staff can only sign in to your account to help you (or set a new password) when you read the PIN to them yourself. A support session lasts an hour, can't touch your passwords, payments or tokens, and you're emailed every time. The PIN changes after each use. ## Your projects Each account's project code runs in its own sandbox. Previews are only visible to you and your team, and published sites are served separately from the app. ## Resetting your password **Forgot password?** emails you a reset link. Resetting by email removes any extra sign-in passwords. --- # Plans & billing URL: https://devmachinist.com/docs/billing # Plans & billing ## Free trial New accounts start with a free trial: previews, publishing, hosted sites and native exports are all included. No card is needed. ## Pro Upgrade to **Pro** under **Account** to keep building after the trial. Payment is handled by Stripe; manage your card, invoices and cancellation from the customer portal linked on the Account page. ## When a trial or plan ends Your projects are kept. Previews, publishing and hosted sites pause until you upgrade. Accounts that never upgrade are deleted a while after their trial ends; paid accounts that lapse are kept for months so you can come back. ## Getting paid Shop sales and developer fees from client stores are paid to your Stripe payout account — see [Shop](/docs/shop) and [Payments & stores](/docs/payments). The **Earnings** page lists every payout.