sdk

柴制造商 – 开源后风建造器

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 (
<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
}}
/>
);
}\”>

 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站在许多开源库和工具的肩膀上。我们对这些项目的贡献表示感谢。