luismps / build-ui Goto Github PK

View Code? Open in Web Editor NEW

168.0 8.0 26.0 12.75 MB

Code your own site builders with React

Home Page: https://luismps.github.io/build-ui/

License: MIT License

JavaScript 99.34% CSS 0.66%

react website-builders website-editor drag-and-drop touchscreen page-builder page-editor customizable

build-ui's Introduction

Build-UI for React JS

Build-UI is a simple library thought for React developers packed with features that allow them to effortlessly create website builders. It comes with drag and drop functionality, undo-redo logic, site serialization and deserialization along with some other interesting tools out of the box. Because of the way it is built, it also supports other features such as SSR and component dynamic loading without you having to worry about their implementations.

Overview 🔎

With Build-UI, you can create anything from a very simple to a fully-featured website builder. Build-UI lets you create your website builder on top of your own or third-party React Components. With Build-UI, you only need a lightweight extra layer of code to handle website-building logic, which is made as simple and as transparent as possible.

Installation 💻

You can install via npm with the command:

npm install --save build-ui

Demo 🕹️

A cool demo is now live at https://luismps.github.io/build-ui/demo/. You can also play and experiment with the demo in your local environment.

> git clone https://github.com/LuisMPS/build-ui/
> cd build-ui/examples/demo
> npm install
> npm run dev

Documentation 📖

Visit our documentation at https://luismps.github.io/build-ui/ to learn more about Build UI 😃.

Tutorial ✏️

Go check out our tutorial at: https://luismps.github.io/build-ui/docs/tutorials/how-to-read

build-ui's People

Contributors

Stargazers

Watchers

build-ui's Issues

How can we preview or publish the built site?

how to load the json file

How to understand the saved json file / how to load the json file

Section: Tutorial

Suggest New Content

As the json tree is very verbose / maybe a section on how the saved data can be loaded?

I see that in the demo folder you have a useExporter utility function that generates a full html page document.

may i suggest to work on another utility function that exports the page as only a single page instead of a full html document?

Error when starting for first time, clean install

Describe the bug

Error when running dev command, fresh install check for checking examples.

Error:

 npm run dev                        

> [email protected] dev
> next dev

ready - started server on 0.0.0.0:3000, url: http://localhost:3000
Error [ERR_PACKAGE_PATH_NOT_EXPORTED]: Package subpath './lib/parser' is not defined by "exports" in /Users/wwilki/build-ui/examples/tutorial/node_modules/postcss/package.json
    at new NodeError (node:internal/errors:393:5)
    at throwExportsNotFound (node:internal/modules/esm/resolve:358:9)
    at packageExportsResolve (node:internal/modules/esm/resolve:668:3)
    at resolveExports (node:internal/modules/cjs/loader:529:36)
    at Module._findPath (node:internal/modules/cjs/loader:569:31)
    at Module._resolveFilename (node:internal/modules/cjs/loader:981:27)
    at mod._resolveFilename (/Users/wwilki/build-ui/examples/tutorial/node_modules/next/dist/build/webpack/require-hook.js:4:1784)
    at Module._load (node:internal/modules/cjs/loader:841:27)
    at Module.require (node:internal/modules/cjs/loader:1061:19)
    at require (node:internal/modules/cjs/helpers:103:18)
    at 552 (/Users/wwilki/build-ui/examples/tutorial/node_modules/next/dist/compiled/postcss-scss/scss-syntax.js:1:11590)
    at __nccwpck_require__ (/Users/wwilki/build-ui/examples/tutorial/node_modules/next/dist/compiled/postcss-scss/scss-syntax.js:1:11735)
    at 270 (/Users/wwilki/build-ui/examples/tutorial/node_modules/next/dist/compiled/postcss-scss/scss-syntax.js:1:400)
    at __nccwpck_require__ (/Users/wwilki/build-ui/examples/tutorial/node_modules/next/dist/compiled/postcss-scss/scss-syntax.js:1:11735)
    at 327 (/Users/wwilki/build-ui/examples/tutorial/node_modules/next/dist/compiled/postcss-scss/scss-syntax.js:1:260)
    at __nccwpck_require__ (/Users/wwilki/build-ui/examples/tutorial/node_modules/next/dist/compiled/postcss-scss/scss-syntax.js:1:11735) {
  code: 'ERR_PACKAGE_PATH_NOT_EXPORTED'
}

Could you add a guide or feature about previewing or publishing website builded by build-ui website builder

How to make table grid for dropping ui here?

I'm trying to make it so that I can take a table layout and drag elements there, but I have duplicate elements in all columns, how can I fix this?

Smooth drag n drop

TailwindCss?

Your demo project is great!!! It uses material-ui a lot.
I normally use tailwindcss. I am wondering how it would be like to create the same project as your Demo using tailwindcss. Is it possible with all those features? More difficult? How would be the developer experience?