Repository files navigation

ENGLISH ｜中文

An open-source, pretty, simple and fast meilisearch admin dashboard UI for managing your meilisearch instances

🚀 Indexes CRUD

🔎 Search documents

💪 Documents management

🛠️️ Index settings

⚓ Multiple instances management

🔒 Data is stored inside your browser

📦 Docker image support

🎱 Singleton mode support (easy to integrate with your own apps)

🌐 I18n support (en, zh)

✅ Remember update CORS settings in your instance server for this ui domain before using.

Because this app use meilisearch official JS client to call your meilisearch instance, you need to manually configure CORS settings in your web server to make sure ui panel can access your instance server with api calls.

Add your ui panel deployment domain to your instance server cors list.

ex:

# ... other configurations     add_header Access-Control-Allow-Origin "your.meilisearch-ui.domain.com";# ... other configurations

Learn how to configure CORS settings in your web server

There is a live demo 👉meilisearch-ui, deploy on Vercel.

docker pull riccoxie/meilisearch-ui:latestdocker run -d --restart=on-failure:5 --name="meilisearch-ui" -p<your-port>:24900 riccoxie/meilisearch-ui:latest

Due to functions such as adapting custom paths, the main image size will become a burden for some users. If you only need to use the basic functionality of the application, you can use thelite variant image, which contains only the necessary constructs and is very small compared to the main image.

For specific image variants, please refer toImage version list

lite images do not support the following features:

• Singleton mode

You can deploy this app to the cloudwithVercel

Just one click the button below to deploy this app automatically

See thisissue.

You can configure the base path of this app by setting theBASE_PATH environment variable.

For example, if you want to deploy this app to the/meilisearch-ui path, you can set theBASE_PATH environment variable to/meilisearch-ui.

docker run -d --restart=on-failure:5 --name="meilisearch-ui" -p<your-port>:24900 -e BASE_PATH="/meilisearch-ui" riccoxie/meilisearch-ui:latest

See thisissue.

If you want to use this app with only one meilisearch instance, you can enable the singleton mode in two ways:

Configure singleton mode using environment variables:

docker run -d --restart=on-failure:5 \  --name="meilisearch-ui" \  -p<your-port>:24900 \  -e SINGLETON_MODE=true \  -e SINGLETON_HOST=your-meilisearch-host \  -e SINGLETON_API_KEY=your-api-key \  riccoxie/meilisearch-ui:latest

If you need more customization, you can build from source following these steps:

1.Clone this repo

git clone git@github.com:riccox/meilisearch-ui.git --depth=1

2.Go into root dir of repo

cd meilisearch-ui

3.install dependencies

pnpm install

4.create.env.local file at root dir of repo, add the following configuration:

VITE_SINGLETON_MODE=trueVITE_SINGLETON_HOST=your-meilisearch-hostVITE_SINGLETON_API_KEY=your-api-key

5.Build the app

pnpm build

Once the build is complete, you will find thedist directory in the root directory, which is a packaged SPA application directory that can be deployed to any server.

You can preview the packaged singleton mode application locally using the following command:

pnpm dlx serve dist

Regardless of which method you use, when you open the app, you will be directly redirected to the instance page.

By default, all hosts are allowed and no extra configuration is needed.

Only if you want to restrict allowed hostnames, you can set the optional environment variableALLOWED_HOSTS. For example:

ALLOWED_HOSTS=demo.ddev.site,another.domain.com

If you have no special requirements, you do not need to set this variable.

Note: TheALLOWED_HOSTS variable is only available in the full version image. The lite image does not support this feature.

git clone git@github.com:riccox/meilisearch-ui.gitcd meilisearch-uipnpm installpnpm dev

• Meilisearch - Search engine
• React v18 - UI library
• TypeScript - Type safety
• Vite - Build tool

• Arco Design - Enterprise design system by ByteDance
• Semi UI - Design system by TikTok Frontend Team
• Mantine UI - Modern React components library
• Next UI - Beautiful React UI library
• Radix UI - Unstyled, accessible components
• TailwindCSS - Utility-first CSS framework
• UnoCSS - Instant atomic CSS engine

• TanStack Query - Powerful async state management
• TanStack Router - Type-safe routing
• Zustand - Simple state management
• Immer - Immutable state handling
• Zod - TypeScript-first schema validation

• i18next - Internationalization framework
• React Hook Form - High-performance forms
• React Error Boundary - Error handling

• Lodash - Utility library
• Day.js - Lightweight date handling
• Fuse.js - Fuzzy search library
• ECharts - Visualization library
• ahooks - React Hooks library

• Biome - Code formatting and linting
• ESLint - Code quality tool
• Prettier - Code formatter

• Framer Motion - Animation library
• Lucide Icons - Icon library
• Tabler Icons - Icon library
• Monaco Editor - Code editor
• Sonner - Toast notifications
• Vaul - Drawer component