Generate Node.js Admin Panel using Kottster

Kottster is an open-source tool for creating an admin panel on top of your database. It's built with Remix, a full-stack framework that uses Node.js and React.

Kottster allows you to easily generate pages to view and manage data in your database tables. Here’s an example of a typical page like this in Kottster:

The main feature of Kottster is that you can create pages just by defining a simple configuration for the features you need.

For example, let's say we want to create a page to view data from the couriers table in a database. Our users should be able to search, sort, and filter the data. We also want to allow adding new couriers, as well as editing or deleting existing ones.

Normally, this would require setting up a backend with an API, building a frontend, and integrating it with the API.

But with Kottster, we can create this page using a simple configuration:

export default action = app.defineTableController(dataSource, {
  table: 'couriers',
  primaryKeyColumn: 'id',
  select: {
    pageSize: 16,
    searchableColumns: ["first_name", "last_name", "email"],
    sortableColumns: ["created_at"],
    filterableColumns: ["id"]
  },
  insert: true,
  update: true,
  delete: false
});

Users will be able to search within the specified searchableColumns, sort data based on the sortableColumns, and filter using the filterableColumns. Each option here defines how the table behaves.

Instead of spending time coding basic CRUD endpoints and building an admin panel interface, you can focus on developing your product.

The best part is that while you can create pages manually, you don’t have to. Kottster includes a built-in page generator that can analyze any table in your database, including its columns and relationships. It does this in literally seconds—and without using any LLM.

You can learn more about features Kottster has on our website or check out the live demo to see the type of admin panel you can build.

How to get started

To get started, create a new project using the following command:

npx @kottster/cli new

Make sure you have Node.js (v20 or higher) installed.

It will ask you a few questions, such as the project name, whether to use JavaScript or TypeScript, and which package manager to use.

Once the installation is complete, go to the created project folder and run the command npm run dev to start the project locally (default: http://localhost:5480).

Open the server URL in your browser. You’ll see an authentication page where you can create an account. After that, you’ll be able to create an app by specifying its name:

Clicking “Create” will initialize your project locally and log you into it.

Connect your database

After creating an app, you’ll land on the Getting Started page, where you can easily connect your database:

There, you can choose the database you want to connect to and either enter its credentials directly or generate a file to specify them manually.

Since the app is self-hosted, Kottster doesn’t store or access your database credentials, so you don’t need to worry about privacy concerns.

Generate pages

Once your database is connected, you can start creating pages.

Click the "Add Page" button in the sidebar, and a modal will appear where you can specify the page title and choose its content type:

• Empty – Creates a blank page with no content.
• Table – Generates a table page like the one shown earlier, allowing you to view and manage data from any database table in a convenient way.
• Table with custom SQL query – Generates a table page with a sample SQL query to extract data from your database.
• Table with custom fetch – Generates a table page that retrieves data from a sample API.
• Custom page – Creates an example page with a custom controller. It generates a backend response and a client-side component that fetches and displays the data.

If you choose "Table" as the page content and select a database table, Kottster will analyze the table—including its columns and relationships—and generate the most suitable page for it.

The page will be created in the ./app/routes directory, and a new navigation item will be added to the sidebar automatically.

You can customize any generated page as needed, adding custom components or business logic to fit your needs.

How to deploy

The Kottster app you build is essentially a Remix app running on a Node.js server, which can be deployed anywhere, including popular cloud providers.

You can learn more about this by reading our guide on deploying Kottster to production.

Also, here’s a great article on where to host your Remix app: https://www.jacobparis.com/content/where-to-host-remix

---

To learn more, visit the Kottster documentation or check out the source code on GitHub.

Thank you for reading!