AdminForth - free powerfull Node.js admin panel framework on Vue & Tailwind

• Try live demo (Read-only mode)

• Hello world in 5 minutes with AdminForth

• Tutorial

Why AdminForth:

• Init AdminForth project with npx adminforth create-app and pass your database URL, import the tables you wish to see in admin using npx adminforth resource, and get fully functional UI for your data (filter, create, edit, remove)
• Modern look and simple Tailwind-ish ability to adjust it
• Supports Postgres, MySQL, Mongo, SQLite, Clickhouse
• Define Vue components to change look of various parts of admin using npx adminforth component (edit data cells, edit fields, add something above the table, inject something to header or sidebar, add custom page with charts or custom components)
• Build-in Components library (AdminForth AFCL) with premade easy-to-use build-blocks which follow your theme
• Define express APIs and call them from your components and pages
• Use various modern back-office-must-have plugins like audit log, files/image upload, TOTP 2FA, I18N, Copilot-style AI writing and image generation and many more
• AdminForth is always free and open-source (no paid versions, no cloud subscriptions sh*t)

Project initialisation

mkdir myadmin && cd myadmin
npx adminforth create-app

Previews

Custom Dashboard

Chat-GPT plugin

Image DALEE Generation

For developers

The most convenient way to add new features or fixes is using dev-demo. It imports the source code of the repository and plugins so you can edit them and see changes on the fly.

Fork repo, pull it and do next:

cd adminforth
npm ci
npm run build

To run dev demo:

cd dev-demo
cp .env.sample .env

# this will install all official plugins and link adminforth package, if plugin installed it will git pull and npm ci
npm run install-plugins

# same for official adapters
npm run install-adapters

npm ci
npm run migrate:local
npm start

Adding columns to a database in dev-demo

Open .prisma file, modify it, and run:

npm run namemigration -- --name desctiption_of_changes

Testing CLI commands during development

Make sure you have not adminforth globally installed. If you have it, remove it:

npm uninstall -g adminforth

Then, in the root of the project, run once:

cd adminforth/adminforth
npm run build

This will automatically make an npm link to the adminforth package in the root of the project.

Then, go to testing app, e.g. created with CLI, and use next command:

npx -g adminforth <your command under development>

This will always run latest version of adminforth package.