柴制造商 - 开源后风建造器
Chai Builder是一种开源低代码React + Tailwind CSS视觉构建器。它使您可以通过将元素拖动到画布上来视觉创建网页。这是一个简单的反应组件，它将成熟的视觉构建器提供给任何React应用程序。
演示：https：//chaibuilder-sdk.vercel.app/
NextJS入门者：https：//github.com/chaibuilder/chaibuilder-nextjs
手动安装：
步骤1：安装软件包
npm install @chaibuilder/ sdk步骤2：添加自定义的尾风配置。创建一个新文件： tailwind.chaibuilder.config.ts 。
将路径传递到源文件。
sdk/tailwind";
export default getChaiBuilderTailwindConfig(["./src/**/*.{js,ts,jsx,tsx}"]);
">
import { getChaiBuilderTailwindConfig } from "@chaibuilder/ sdk /tailwind" ; export default getChaiBuilderTailwindConfig ( [ "./src/**/*.{js,ts,jsx,tsx}" ] ) ;
步骤3：创建一个新的chaibuilder.tailwind.css
@config "./tailwind.chaibuilder.config.ts" ;
@tailwind base;
@tailwind components;
@tailwind utilities;步骤4：将构建器添加到您的页面。
sdk/styles";
import {loadWebBlocks} from "@chaibuilder/ sdk /web-blocks";
import { ChaiBuilderEditor } from "@chaibuilder/ sdk ";
loadWebBlocks();
const BuilderFullPage = () => {
return (
{
console.log(blocks, providers, brandingOptions );
return true
}}
/>
);
}">
import "./chaibuilder.tailwind.css" ; import "@chaibuilder/ sdk /styles" ; import { loadWebBlocks } from "@chaibuilder/ sdk /web-blocks" ; import { ChaiBuilderEditor } from "@chaibuilder/ sdk " ; loadWebBlocks ( ) ; const BuilderFullPage = ( ) => { return ( < ChaiBuilderEditor blocks = { [ { _type : 'Heading' , _id : 'a' , content : 'This is a heading' , styles : '#styles:,text-3xl font-bold' } ] } onSave = { async ( { blocks , providers , brandingOptions } ) => { console . log ( blocks , providers , brandingOptions ) ; return true } } /> ) ; }
渲染页面上的块。
export default ( ) => {
return < RenderChaiBlocks blocks = { blocks } />
} 支持
如果您喜欢该项目，则可以帮助我们扩展。 Chaibuilder是开发人员在业余时间制作的合作努力。无论多么谦虚，我们都重视每一个贡献，因为每个贡献都代表着各种方式向前迈出的重要一步，尤其是在不断增强该工具的动力时。
致谢
Chai Builder站在许多开源库和工具的肩膀上。我们对这些项目的贡献表示感谢。
下载源码
通过命令行克隆项目:
git clone https://github.com/chaibuilder/sdk.git