Skip to main content

Open-Source Admin Template

Create Data Apps with a Prompt
— or Build Visually

Describe your app to any AI and paste the generated schema. Or use the visual editor to add collections and fields. Either way: a complete admin dashboard with REST API, authentication, and data management — deployed in minutes.

Build with AI

Copy the built-in prompt, describe your app to ChatGPT or Claude, paste the JSON schema — your dashboard updates instantly.

Build Visually

Add collections, define fields, and set relations using the drag-and-drop datamodel editor. No code needed.

Deploy with 3 commands:

npm install -g codehooks
coho create myadmin --template react-admin-dashboard
cd myadmin && npm run deploy


# Your admin dashboard is live

No credit card required. Free tier for development. Full source code included.

From Idea to Data App in Minutes

Describe what you need or design it visually — your admin dashboard comes with everything built in:

  • CRUD REST API endpoints with OpenAPI/Swagger docs
  • Forms and list views for every collection
  • Authentication and role-based permissions
  • Search, filtering, and pagination
  • File uploads and image handling
  • Relationships and lookup fields
  • Audit logging and user management

All of this from a single schema — generated by AI or built visually.

Perfect For

Internal Tools — Manage company data and operations
SaaS Admin Panels — Customer and content management
Rapid Prototyping — Validate data models quickly
Client Projects — Deliver admin UIs in hours, not weeks

Everything You Need in an Admin Dashboard

Define your schema, deploy, and start managing data — REST API, OpenAPI docs, authentication, and permissions included

CRUD REST API from JSON

Define collections in a single JSON schema. Get a full REST API with OpenAPI/Swagger documentation, plus auto-generated lists, detail views, forms, search, and pagination.

JWT Auth & Role-Based Access

Built-in login with admin and user roles. Route protection, user management, and httpOnly cookie sessions out of the box.

Visual Datamodel Editor

Drag-and-drop collection and field management with JSON editing, syntax highlighting, and version control with rollback.

AI-Powered Schema Design

Built-in prompt generator for ChatGPT, Claude, or any AI. Describe your app, paste the generated JSON, and your UI updates instantly.

Advanced Field Types

Lookups with live search, file and image uploads, email, URL, datetime, enums, and multi-select relationships between collections.

Activity Logging

Full audit trail for all create, update, and delete operations. Searchable history with admin-only log management.

How It Works

From prompt or visual design to live admin dashboard in four steps

Describe or Design

Prompt AI or visual editor

→

Auto-Generate UI

Lists, forms, detail views

→

Manage Data

REST API + relations

→

Deploy & Extend

Customize anything

Schema-driven: Edit via AI prompt or visual editor → UI regenerates automatically → No frontend code changes needed

See It in Action

Design your data model visually or with AI — the interface generates automatically

React Admin Dashboard - Visual datamodel editor with drag-and-drop field management

Visual Datamodel Editor

Drag-and-drop schema management with version control and rollback

React Admin Dashboard - Collection list view with search, filtering, and pagination

Collection List View

Auto-generated lists with search, filtering, and pagination

React Admin Dashboard - Record detail view with form fields and related data

Detail View

Master-detail interface with dynamic form fields and validation

React Admin Dashboard - Related collections and lookup fields with live search

Data Relations

Lookup fields with live search and related collection displays

One Schema, Complete Admin UI

Define your collections and fields in a datamodel JSON file. The dashboard generates all views, forms, and relationships automatically.

  • Collections become sidebar navigation items
  • Fields become form inputs with proper types
  • Lookup fields create live-search relationships
  • Icons, labels, and ordering are fully configurable

Or skip the JSON entirely — use the visual editor to create the same schema with clicks.

datamodel.json — define collections and fields:

// datamodel.json
{
  "collections": {
    "customers": {
      "label": "Customers",
      "icon": "users",
      "schema": {
        "type": "object",
        "properties": {
          "name": { "type": "string", "title": "Full Name", "minLength": 1 },
          "email": { "type": "string", "format": "email", "title": "Email" },
          "status": { "type": "string", "enum": ["active", "inactive", "lead"], "title": "Status" }
        },
        "required": ["name"]
      },
      "listFields": ["name", "email", "status"],
      "searchFields": ["name", "email"],
      "defaultSort": { "name": 1 }
    }
  }
}

Supported Field Types

Every field type renders as the right UI component automatically

TypeFormat / ModifierRenders As
string—Text input
stringformat: "email"Email input
stringformat: "uri"URL input
stringformat: "date-time"Date-time picker
stringenum: [...]Dropdown select
stringx-accept: "image/*"Image upload with preview
number—Number input
boolean—Checkbox toggle
objectx-lookup: {...}Lookup with live search
arrayitems.x-lookupMulti-select lookup

Built for Real-World Admin Needs

From internal tools to production SaaS panels

Internal Tools

Manage employees, inventory, projects, or any operational data. Define your schema and hand off a working admin in hours.

employees • inventory • projects • tasks

SaaS Admin Panels

Customer management, content moderation, subscription tracking. Production-ready auth and role system included.

customers • subscriptions • content • settings

Rapid Prototyping

Validate data models before writing application code. Use AI to generate schemas, iterate visually, and export when ready.

AI schema design • visual editing • instant preview

Database Management

Visual database with collections, fields, and relations. Manage data through the UI or through REST API calls.

collections • fields • relations • REST API

Ready to Build Your Admin Dashboard?

Deploy a production-ready admin panel in 5 minutes. Free to start, full source code included.

React Admin Dashboard FAQ

Common questions about the admin dashboard template, features, and deployment

What is the React Admin Dashboard template?
The React Admin Dashboard is a full-stack template that generates a complete admin interface from a single JSON datamodel definition. It includes a full CRUD REST API with OpenAPI/Swagger documentation, JWT authentication, role-based access control, a visual datamodel editor, and AI-assisted schema design. Built with React 18, Vite, Tailwind CSS v4, and shadcn/ui.
How does the JSON-driven approach work?
You define your data collections and fields in a datamodel.json file. The dashboard automatically generates collection lists, detail views, forms, search, filtering, and pagination based on that schema. Change the schema, and the UI updates instantly — no code changes needed.
What authentication does it include?
The template includes JWT-based authentication with httpOnly cookie sessions. It supports two roles: admin and user. Admins can manage users, edit the datamodel, and clear activity logs. Users can view and manage collection data. Default credentials are admin/admin and user/user.
Can I use AI to design my datamodel?
Yes. The template includes a built-in prompt generator that creates context about the expected datamodel format. Copy the prompt into ChatGPT, Claude, or any AI, describe the app you want to build, and paste the generated JSON back into the visual editor. Your new collections and UI appear instantly.
What field types are supported?
The template supports: text, email, URL, date-time, number, boolean, enum (dropdown select), image upload with preview, file upload, lookup fields with live search (single and multi-select), and object references across collections.
How do lookup fields and data relations work?
Lookup fields create references between collections. A single lookup renders as a searchable dropdown, while array lookups enable multi-select. Detail views can display related records from other collections with configurable filters, sorting, and inline record creation.
Can I customize the UI beyond the generated interface?
Absolutely. The template uses React components with shadcn/ui and Tailwind CSS, so you can customize any part of the interface. The codebase is modular — pages, components, and API layer are cleanly separated for easy extension.
How do I deploy the admin dashboard?
Three commands: npm install -g codehooks, then coho create myadmin --template react-admin-dashboard, then npm run deploy. Set your JWT secrets with coho set-env, and your admin dashboard is live with a unique URL.
Is the admin dashboard suitable for production use?
Yes. It includes JWT authentication, role-based access control, activity logging, input validation via JSON Schema, and httpOnly cookie sessions. The backend runs on Codehooks.io serverless infrastructure with automatic scaling.
What's the difference between admin and user roles?
Admins can: view and edit all collections, manage the datamodel editor, manage users, and clear activity logs. Users can: view and edit collection data and view activity logs. The datamodel editor and user management are admin-only features.
Does it support dark mode?
Yes. The dashboard includes dark mode with system preference support. It automatically detects the user's OS-level dark mode setting and applies the appropriate theme.
Can I use this as a starting point for a SaaS admin panel?
Yes — that's one of its primary use cases. The JSON-driven architecture means you can define your SaaS data model, get a working admin panel immediately, and then customize the frontend and backend as your product evolves. The role system, activity logging, and authentication are production-ready foundations.