https://github.com/moonrailgun/saucer
A Layout Editor for Drag and Drop
https://github.com/moonrailgun/saucer
drag drop editor layout layout-editor react saucer
Last synced: 8 months ago
JSON representation
A Layout Editor for Drag and Drop
- Host: GitHub
- URL: https://github.com/moonrailgun/saucer
- Owner: moonrailgun
- License: mit
- Created: 2020-11-17T08:59:34.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2021-05-28T09:27:38.000Z (about 5 years ago)
- Last Synced: 2025-02-03T05:45:42.109Z (over 1 year ago)
- Topics: drag, drop, editor, layout, layout-editor, react, saucer
- Language: JavaScript
- Homepage: https://saucer.moonrailgun.com/
- Size: 2.65 MB
- Stars: 8
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Saucer
A Layout Editor for Drag and Drop
## What is Saucer
`Saucer` is a layout editor framework which can help you build your own layout editor. You can design your `DSL`, and let `Saucer` help you to finish other trivial work.
## Why to use Saucer
We know, this world has been lots of layout editor, but those project is work for zero code develop, but `saucer` is make for meta develop, its means `saucer` have mini-size and easy to expand, and the output of `saucer` is more necessary.
## Quick Start
```jsx
import React from 'react';
import ReactDom from 'react-dom';
import { regCup } from '@saucerjs/core';
regCup({
name: 'Button',
displayName: 'Button Component',
desc: 'This is a Button',
type: 'leaf',
render: () => {
return Click it!;
},
});
ReactDom.render(
,
document.querySelector('#app')
);
```
## For Develop
#### First of all, Link dependency
```bash
yarn run bootstrap
```
#### Build it
```bash
yarn run build
```
#### Then, check for demo
```bash
yarn run start
```
## Proper Nouns
- `Saucer`: This framework
- `Cup`: `Saucer` have many cup, you can treat it as template.
- `Tea`: The instance of a `Cup`, every tea have its own attributes.