> ## Documentation Index
> Fetch the complete documentation index at: https://docs.olonjs.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Quickstart: run your first OlonJS project in minutes

> Clone the next-inkwell starter, install dependencies, start the dev server, and make your first content edit through the Studio editor in under 10 minutes.

This guide walks you through creating a new OlonJS project from the **next-inkwell** starter template, running it locally, and making your first content edit through the visual Studio editor. By the end you will have a fully working OlonJS site running on your machine and a clear picture of how pages, sections, and Studio fit together.

<Steps>
  ### Clone the template

  Clone the **next-inkwell** starter repository and move into the project directory:

  ```bash theme={null}
  git clone https://github.com/olonjs/next-inkwell.git my-site
  cd my-site
  ```

  The repository contains a fully functional OlonJS site — pages, collections, section components, and Studio configuration — ready to run without any additional setup.

  ### Install dependencies

  Install the project's dependencies using your preferred package manager:

  <CodeGroup>
    ```bash npm theme={null}
    npm install
    ```

    ```bash yarn theme={null}
    yarn install
    ```

    ```bash pnpm theme={null}
    pnpm install
    ```
  </CodeGroup>

  ### Run the development server

  Start the Next.js development server:

  ```bash theme={null}
  npm run dev
  ```

  The server starts on [http://localhost:3000](http://localhost:3000). Open that URL in your browser to see the starter site. The development server watches your source files and hot-reloads the browser whenever you save a change.

  ### Open Studio

  Navigate to [http://localhost:3000/admin](http://localhost:3000/admin) to open the visual Studio editor.

  Studio is the built-in editing interface for OlonJS. It reads your Zod schemas and renders a form for every section on every page, so you can edit content visually without touching JSON files directly. No extra login or configuration is required in development mode.

  ### Edit your first section

  In Studio, select any page from the sidebar to open its section list. Click a section — for example, the **Hero** section at the top of the home page — to expand its editing panel.

  Update the **title** field with your own text, then click **Save**. Studio writes the change back to the source JSON file in `src/data/pages/` via the `/api/save-to-file` route. Switch back to [http://localhost:3000](http://localhost:3000) and you will see your new title rendered on the page.

  ### Build for production

  When you are ready to deploy, run the production build:

  ```bash theme={null}
  npm run build
  ```

  The build process runs a set of **prebuild scripts** before Next.js compiles your application. These scripts:

  * **Sync** all page and collection JSON from `src/data/` into `public/` so the static file server can serve them without hitting an API route
  * **Generate** `public/llms.txt` — a plain-text content index for large language models
  * **Bake** fully resolved page and collection bundles into `public/`, including cross-collection relations and per-page MCP manifests
  * **Generate** `public/sitemap.xml` from your page index
  * **Generate** `public/robots.txt` based on your site configuration

  After the build completes, deploy the `.next/` output to any platform that supports Next.js (Vercel, Netlify, a Node server, etc.).
</Steps>

<Tip>
  The quickstart above covers the essentials, but Studio has many more features — page creation, collection item editing, asset uploads, and live section previews. See the [Studio guide](/guides/studio) for a full walkthrough.
</Tip>


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.