Convert Figma logo to code with AI

baidu logoamis

前端低代码框架，通过 JSON 配置就能生成各种页面。

17,078
2,478
17,078
1,222
View on GitHubView on NPM

Top Related Projects

ant-design's avatar

ant-design-pro

36,428

👨🏻‍💻👩🏻‍💻 Use Ant Design like a Pro!

marmelab's avatar

react-admin

24,895

A frontend Framework for single-page applications on top of REST/GraphQL APIs, using TypeScript, React and Material Design

formio's avatar

formio

2,033

A Form and Data Management Platform for Progressive Web Applications.

strapi's avatar

strapi

63,346

🚀 Strapi is the leading open-source headless CMS. It’s 100% JavaScript/TypeScript, fully customizable, and developer-first.

directus's avatar

directus

27,495

The flexible backend for all your projects 🐰 Turn your DB into a headless CMS, admin panels, or apps with a custom UI, instant APIs, auth & more.

Quick Overview

Amis is a low-code front-end framework developed by Baidu. It allows developers to create complex web applications using JSON configurations instead of writing traditional code. Amis aims to simplify the process of building data-driven interfaces and admin panels.

Pros

  • Rapid development: Build complex UIs quickly using JSON configurations
  • Extensive component library: Offers a wide range of pre-built components
  • Flexibility: Supports custom components and extensions
  • Low learning curve: Easier for non-developers to create interfaces

Cons

  • Limited customization: Some advanced UI requirements may be challenging to implement
  • Performance concerns: Large applications may experience slower load times
  • Dependency on Baidu's ecosystem: May not integrate as smoothly with other frameworks
  • Documentation primarily in Chinese: Can be a barrier for non-Chinese speakers

Code Examples

  1. Creating a simple form:
{
  "type": "form",
  "api": "/api/form/save",
  "body": [
    {
      "type": "input-text",
      "name": "name",
      "label": "Name"
    },
    {
      "type": "input-email",
      "name": "email",
      "label": "Email"
    }
  ]
}
  1. Displaying a data table:
{
  "type": "table",
  "api": "/api/users",
  "columns": [
    {
      "name": "id",
      "label": "ID"
    },
    {
      "name": "name",
      "label": "Name"
    },
    {
      "name": "email",
      "label": "Email"
    }
  ]
}
  1. Creating a chart:
{
  "type": "chart",
  "api": "/api/chart/data",
  "chartType": "line",
  "x": "date",
  "y": "value"
}

Getting Started

  1. Install Amis:
npm install amis
  1. Create an HTML file with the following content:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Amis Demo</title>
    <link rel="stylesheet" href="https://unpkg.com/amis/lib/themes/default.css">
    <script src="https://unpkg.com/amis/lib/index.js"></script>
</head>
<body>
    <div id="root"></div>
    <script>
        let amis = amisRequire('amis/embed');
        let amisJSON = {
            type: 'page',
            title: 'Hello World',
            body: 'Welcome to Amis!'
        };
        amis.embed('#root', amisJSON);
    </script>
</body>
</html>
  1. Open the HTML file in a web browser to see your first Amis application.

Competitor Comparisons

ant-design logo

ant-design-pro

36,428

👨🏻‍💻👩🏻‍💻 Use Ant Design like a Pro!

Pros of Ant Design Pro

  • More comprehensive ecosystem with extensive documentation and community support
  • Built on top of the popular Ant Design component library, offering a wide range of pre-built UI components
  • Provides a complete out-of-the-box solution for enterprise-level applications

Cons of Ant Design Pro

  • Steeper learning curve due to its complexity and extensive feature set
  • Less flexibility for customization compared to Amis' low-code approach
  • Heavier bundle size, which may impact initial load times

Code Comparison

Ant Design Pro (TypeScript):

import { PageContainer } from '@ant-design/pro-layout';
import { Card, Alert, Typography } from 'antd';

const Welcome: React.FC = () => (
  <PageContainer>
    <Card>
      <Alert message="Welcome to Ant Design Pro" type="success" showIcon />
    </Card>
  </PageContainer>
);

Amis (JSON):

{
  "type": "page",
  "title": "Welcome",
  "body": {
    "type": "alert",
    "level": "success",
    "body": "Welcome to Amis"
  }
}

Both repositories offer powerful tools for building web applications, but they cater to different needs. Ant Design Pro provides a more traditional development experience with a rich set of components and features, while Amis focuses on a low-code approach for rapid development.

marmelab logo

react-admin

24,895

A frontend Framework for single-page applications on top of REST/GraphQL APIs, using TypeScript, React and Material Design

Pros of react-admin

  • More mature and widely adopted in the React ecosystem
  • Extensive documentation and community support
  • Highly customizable with a modular architecture

Cons of react-admin

  • Steeper learning curve for beginners
  • Requires more setup and configuration compared to amis
  • Less out-of-the-box UI components

Code Comparison

react-admin:

import { Admin, Resource } from 'react-admin';
import { PostList, PostEdit, PostCreate } from './posts';

const App = () => (
  <Admin dataProvider={...}>
    <Resource name="posts" list={PostList} edit={PostEdit} create={PostCreate} />
  </Admin>
);

amis:

{
  "type": "page",
  "body": {
    "type": "crud",
    "api": "https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/sample",
    "columns": [
      { "name": "id", "label": "ID" },
      { "name": "engine", "label": "Rendering engine" }
    ]
  }
}

The code snippets demonstrate the different approaches: react-admin uses a more programmatic setup with React components, while amis utilizes a declarative JSON-like configuration for defining the UI and data interactions.

formio logo

formio

2,033

A Form and Data Management Platform for Progressive Web Applications.

Pros of Formio

  • More extensive documentation and community support
  • Offers a wider range of form components and field types
  • Provides a robust API for backend integration and data management

Cons of Formio

  • Steeper learning curve due to its more complex architecture
  • Requires more setup and configuration compared to Amis
  • May be overkill for simpler form-building needs

Code Comparison

Formio form definition:

{
  "components": [
    {
      "type": "textfield",
      "key": "firstName",
      "label": "First Name"
    },
    {
      "type": "textfield",
      "key": "lastName",
      "label": "Last Name"
    }
  ]
}

Amis form definition:

{
  "type": "form",
  "body": [
    {
      "type": "input-text",
      "name": "firstName",
      "label": "First Name"
    },
    {
      "type": "input-text",
      "name": "lastName",
      "label": "Last Name"
    }
  ]
}

Both Formio and Amis use JSON configurations to define forms, but Formio's structure is more detailed and offers more customization options. Amis, on the other hand, provides a simpler and more straightforward approach to form definition, which can be easier for beginners to grasp and implement quickly.

strapi logo

strapi

63,346

🚀 Strapi is the leading open-source headless CMS. It’s 100% JavaScript/TypeScript, fully customizable, and developer-first.

Pros of Strapi

  • Open-source headless CMS with a user-friendly admin panel
  • Highly customizable and extensible through plugins
  • Built-in API generation and GraphQL support

Cons of Strapi

  • Steeper learning curve for developers new to headless CMS
  • Requires more setup and configuration compared to low-code platforms
  • Limited built-in UI components for front-end development

Code Comparison

Strapi (Content-Type definition):

module.exports = {
  attributes: {
    title: {
      type: 'string',
      required: true,
    },
    content: {
      type: 'richtext',
    },
  },
};

Amis (JSON-based UI definition):

{
  "type": "page",
  "body": {
    "type": "form",
    "api": "/api/form",
    "controls": [
      { "type": "text", "name": "title", "label": "Title" },
      { "type": "textarea", "name": "content", "label": "Content" }
    ]
  }
}

Strapi focuses on backend content management and API generation, while Amis is a low-code UI builder. Strapi offers more flexibility for custom backend logic, but requires separate front-end development. Amis provides a quicker way to build user interfaces with less code, but may be less suitable for complex, custom backend requirements.

directus logo

directus

27,495

The flexible backend for all your projects 🐰 Turn your DB into a headless CMS, admin panels, or apps with a custom UI, instant APIs, auth & more.

Pros of Directus

  • More flexible and customizable backend system
  • Better support for complex data relationships and structures
  • Larger and more active community, with frequent updates and contributions

Cons of Directus

  • Steeper learning curve for beginners
  • Requires more setup and configuration compared to Amis
  • May be overkill for simple projects or prototypes

Code Comparison

Directus (API endpoint definition):

module.exports = {
  id: 'custom',
  handler: (router, { services, exceptions }) => {
    router.get('/', (req, res) => {
      res.send('Hello World!');
    });
  },
};

Amis (Page configuration):

{
  "type": "page",
  "body": {
    "type": "tpl",
    "tpl": "Hello World!"
  }
}

Both repositories offer different approaches to building web applications. Directus focuses on providing a flexible headless CMS and API, while Amis emphasizes rapid UI development with a low-code approach. The choice between them depends on project requirements, team expertise, and desired level of customization.

Convert Figma logo designs to code with AI

Visual Copilot

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

如流群：3395342 | 如流群2：5511067|

build license version language codecov last

前端低代码框架，通过 JSON 配置就能生成各种后台页面，极大减少开发成本，甚至可以不需要了解前端。

开发指南

以下是参与开发 amis 才需要看的，使用请看前面的文档。

如果 github 下载慢可以使用 gitee 上的镜像。

推荐使用 node 12/14/16。npm 7+， 因为用到了 workspaces 功能。

# 安装项目 npm 依赖，在 node 12 下会有报错但不影响正常使用。
npm i --legacy-peer-deps

# 启动项目，等编译结束后通过 http://127.0.0.1:8888/examples/pages/simple 访问。
npm start

如果是开发编辑器，需要访问 http://127.0.0.1:8888/packages/amis-editor/

测试

注意：本地修改代码后，执行测试用例（npm test --workspaces）之前需要先执行npm run build完成编译，因为 jest 并不支持 TypeScript

# 安装依赖
npm i --legacy-peer-deps

# 执行构建
npm run build

# 执行测试用例
npm test --workspaces

# 测试某个用例
# <spec-name>为用例名称，比如inputImage
npm test --workspace amis -- -t <spec-name>

# 运行某个单测文件
./node_modules/.bin/jest packages/amis/__tests__/renderers/Form/buttonToolBar.test.tsx

# 运行某个单测文件里的某个例子
./node_modules/.bin/jest packages/amis/__tests__/renderers/Form/buttonToolBar.test.tsx -t 'Renderer:button-toolbar'

# 查看测试用例覆盖率
npm run coverage

# 更新 snapshot
npm run update-snapshot

# 更新单个 snapshot
# <spec-name>为用例名称，比如inputImage
npm run update-snapshot --workspace amis -- -t  <spec-name>

发布版本

# 发布内部 registry
npm run publish

# 发布外网环境
# 先通过一下命令设置版本号
npm run version
npm run release

如何贡献

请使用分支开发，首先创建分支

git checkout -b feat-xxx

开发提交后使用 git push --set-upstream origin feat-xxx 创建远程分支。

然后通过系统提示的 https://github.com/xxx/amis/pull/new/feat-xxx 链接来提交 PR。

请采用 typescript 编写，所有合理的改动、新的公用渲染器、用例或者文档的提交都会被接收。

贡献者

低代码平台

amis 只能实现前端低代码，如果需要完整的低代码平台推荐使用爱速搭。

NPM DownloadsLast 30 Days