Quick Overview

amis is Baidu’s open-source low-code front-end framework that quickly generates backend pages using JSON configurations.

  1. Core Features: Supports forms, tables, charts, CRUD operations, and offers a rich set of ready-to-use components.
  2. Technical Principle: Defines page structure and interactive logic using JSON, dynamically generating HTML structure and binding events.

What is amis?

amis (Adaptive Management Interface System) is an open-source low-code front-end framework developed by Baidu. It allows developers to generate various backend pages through simple JSON configurations, without needing to write complex front-end code.

It supports forms, tables, charts, CRUD operations, and includes numerous ready-to-use components. Highly extensible and flexible, amis can be easily integrated into React or pure HTML projects.

Equipped with a visual editor, amis also supports custom themes, internationalization, permission management, and other enterprise-level features — helping developers efficiently build complex backend systems while improving productivity and reducing costs.

Main Features of amis

  • JSON-based Page Generation: Pages are generated directly from JSON strings (e.g., forms, tables, charts, CRUD lists), requiring no front-end coding. A visual drag-and-drop editor allows even non-developers to get started quickly.
  • Powerful Low-Code Support: Supports complex form validation, internationalization, permission control, and other enterprise-level needs. Offers customizable form fields and adaptive chart rendering to meet complex backend requirements.
  • High Extensibility & Flexibility: Comes with a rich set of components and supports theme/style customization. It’s highly compatible and can be integrated into both React and pure HTML projects with ease.
  • Enterprise-Grade Functionalities: Includes file uploads, PDF previews, and full CRUD support — ideal for building complete backend systems.
  • Efficient Development Experience: Simplifies component-based development and supports real-time preview. Comes with detailed guides and testing processes for easy onboarding and maintenance.

How amis Works (Technical Principles)

  • JSON-Driven Rendering: Pages are defined via JSON configuration, which describes layout, component types, data bindings, and event handling. The framework parses this configuration to dynamically render HTML and set up interactions.
  • Component-Based Architecture: amis follows a modular design with a built-in component library (e.g., forms, tables, charts). Developers assemble pages by combining components, with data and behavior controlled via JSON.
  • Built with TypeScript & SCSS: Core is written in TypeScript for maintainability and extensibility. Styling uses SCSS, allowing custom themes and styles for varied project requirements.
  • Framework Compatibility: Designed with abstraction and adapters, amis integrates smoothly with React, Vue, or pure HTML projects. Offers unified interfaces and configuration standards for seamless embedding.
  • Visual Editor: Comes with a drag-and-drop UI editor that generates JSON configurations via visual actions. Real-time preview enables a WYSIWYG experience, lowering the learning curve for low-code development.

How to Run amis

  1. Install Dependencies

Recommended Node.js versions: 12/14/16. Requires npm 7+ due to use of workspaces.

1
2
3
4
5
6
# Install project dependencies (errors on Node 12 are expected but harmless)
npm i --legacy-peer-deps

# Start the project. After build completes, visit:
# http://127.0.0.1:8888/examples/pages/simple
npm start

To develop the editor, visit:
http://127.0.0.1:8888/packages/amis-editor/

  1. Testing

⚠️ Note: After modifying code locally, run npm run build before executing test cases, as Jest does not support TypeScript directly.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
# Install dependencies
npm i --legacy-peer-deps

# Build the project
npm run build

# Run all test cases
npm test --workspaces

# Run a specific test case
npm test --workspace amis -- -t <spec-name>  # e.g., inputImage

# Run a specific test file
./node_modules/.bin/jest packages/amis/__tests__/renderers/Form/buttonToolBar.test.tsx

# Run a specific test in a test file
./node_modules/.bin/jest packages/amis/__tests__/renderers/Form/buttonToolBar.test.tsx -t 'Renderer:button-toolbar'

# View test coverage
npm run coverage

# Update all snapshots
npm run update-snapshot

# Update a specific snapshot
npm run update-snapshot --workspace amis -- -t <spec-name>
  1. Publishing a Version
1
2
3
4
5
6
7
# Publish to internal registry
npm run publish

# Publish to external environment
# First, set the version number
npm run version
npm run release