--- title: Getting started description: Add Backlit to an existing app or create a new app with a coding agent. --- Backlit has no installer and no starter template. You give a prompt to a coding agent, and the agent sets up Backlit from this documentation. The documentation is published in a format for agents at `https://usebacklit.com/llms.txt`, so the agent works from the current APIs and not from its training data. There are two prompts. Use the first when you have an application and want an admin panel for it. Use the second when you start from an empty directory. ## Prerequisites - Node.js 24 or later. - A coding agent that can edit files and run commands, such as Claude Code, Codex, or Cursor. - For an existing app: a server that uses [Hono](https://hono.dev). Hono is the first supported host, and adapters for other frameworks will follow. ## Add Backlit to an existing app Run the agent in the root directory of your application. The prompt tells the agent to mount Backlit behind the authentication that your app already has, and to create the first resource from an entity that your app already has. ```text title="Prompt" Add a Backlit admin panel to this application. Backlit is a server-driven UI framework. Read its documentation before you write code: fetch https://usebacklit.com/llms.txt, then read the Introduction, the Key concepts page, and each reference page that you need. Do not guess an API. When the documentation does not answer a question, stop and ask me. Do these steps in order: 1. Find the Hono server entry file, the data layer (ORM or query builder), and the middleware that authenticates staff or admin users. Tell me what you found. If there is no authentication for admin users, stop and ask me how to protect the admin routes. 2. Install @backlit/sdk and @backlit/hono with the package manager of this project. 3. Create src/admin/app.ts with defineApp and one area. 4. Select one entity of this application that an admin must see, and tell me which one you selected. Create a resource for it in src/admin/resources/ with its fields, a list view with a table, and an edit view with a form and an action. Use the existing data layer in the view and the action. Do not add a new API endpoint for the admin panel. 5. Mount backlitRoutes(app) on the Hono server at /admin/api, after the authentication middleware. 6. Create the frontend in src/admin/client/ with Vite, React, @backlit/ui, and TanStack Router with file-based routes in src/admin/client/pages/. Add a Vite proxy from /admin/api to the server. 7. Add the scripts admin:dev and admin:build to package.json. Then verify the work. Run the TypeScript type check. Start the server, request /admin/api/manifest, confirm that the response lists the area and the navigation entry, and stop the server. Do not leave a process running. Report the files that you created, the commands that start the server and the frontend, and the URL that I must open. ``` ## Create a new app Run the agent in an empty directory. The result is one package that contains the server and the frontend. ```text title="Prompt" Create a new Backlit application in this directory. Backlit is a server-driven UI framework. Read its documentation before you write code: fetch https://usebacklit.com/llms.txt, then read the Introduction, the Key concepts page, and each reference page that you need. Do not guess an API. When the documentation does not answer a question, stop and ask me. Do these steps in order: 1. Create one TypeScript package (ESM). Install hono, @hono/node-server, @backlit/sdk, and @backlit/hono for the server. Install vite, react, @backlit/ui, and @tanstack/react-router for the frontend. 2. Create src/server.ts with a Hono server that mounts backlitRoutes(app) at /api. 3. Create src/app.ts with defineApp, one area, and one navigation entry. 4. Create src/resources/customers.ts. Keep the records in an array in memory. Add the fields, a list view with a table, a text filter, and a paginator, a create view and an edit view with forms, and the actions that the forms submit to. 5. Create the frontend in src/client/ with @backlit/ui and TanStack Router with file-based routes in src/client/pages/. Add a Vite proxy from /api to the server. 6. Add the scripts dev, dev:web, build, and typecheck to package.json. Then verify the work. Run the TypeScript type check. Start the server, request /api/manifest, confirm that the response lists the area and the navigation entry, and stop the server. Do not leave a process running. Report the commands that start the server and the frontend, and the URL that I must open. I will replace the in-memory array with my database later. Keep the data access in one module so that this change is small. ``` ## What the agent creates Both prompts produce the same structure. For an existing app, the files are below `src/admin/`. ```text src/ ├── server.ts The Hono server. It mounts the Backlit routes. ├── app.ts The app: areas, resources, and navigation. ├── resources/ │ └── customers.ts One resource: fields, views, and actions. └── client/ ├── main.tsx The entry of the frontend. It mounts the Backlit shell. ├── app.css The stylesheet. It imports the Backlit styles and your theme. └── pages/ The routes of the frontend. A JSX file that you add here is a custom page. vite.config.ts The Vite configuration, with the proxy to the server. ``` Your work from this point is in `resources/`. Each new screen is a view on a resource, and the frontend does not change when you add one. ## Verify the setup Start the server and the frontend with the commands that the agent reported, and open the URL. The sidebar shows the navigation entry, and the list view shows a table. When the page does not load, request the manifest directly. ```sh curl http://localhost:3000/api/manifest ``` A JSON response with your area means that the server side works, and the problem is in the frontend or in the Vite proxy. An HTTP 404 response means that the Backlit routes are not mounted at the path that you requested. ## Next steps - [Key concepts](/concepts): the terms that the SDK and the reference use. - [Fields](/reference/fields): the field types and their options. - [Blocks](/reference/blocks): the parts that you compose a screen from. - [Server-driven UI](/sdui): how to extend Backlit and how to write a custom page.