https://github.com/coltorapps/builder
React Form Builder. Headless, full-stack, typesafe, multi-platform, framework agnostic, zero dependencies, unopinionated.
https://github.com/coltorapps/builder
builder dashboard-builder dynamic-builder form-builder headless landing-page-builder react typescript ui-builder website-builder
Last synced: about 1 year ago
JSON representation
React Form Builder. Headless, full-stack, typesafe, multi-platform, framework agnostic, zero dependencies, unopinionated.
- Host: GitHub
- URL: https://github.com/coltorapps/builder
- Owner: coltorapps
- License: mit
- Created: 2023-10-25T13:55:39.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2025-01-03T13:36:59.000Z (over 1 year ago)
- Last Synced: 2025-04-04T22:01:54.252Z (about 1 year ago)
- Topics: builder, dashboard-builder, dynamic-builder, form-builder, headless, landing-page-builder, react, typescript, ui-builder, website-builder
- Language: TypeScript
- Homepage: https://builder.coltorapps.com
- Size: 6.7 MB
- Stars: 73
- Watchers: 4
- Forks: 9
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://builder.coltorapps.com)
Builder
Powerful library for crafting your own form builders and beyond.
## Introduction
**Builder** is a versatile React and React Native library designed for crafting dynamic form builders and much more. You can also develop dynamic website builders, dashboard builders, and any other builders you envision.
Some key characteristics:
- Headless: Bring your own components and design the user experience as you want.
- Full-stack: Provides comprehensive tools for building both the interface and validate schemas on the back-end.
- Typesafe: Ensures full type safety by default in every aspect.
- Multi-platform: Runs on web (React), mobile (React Native), servers, serverless, and workers.
- Framework agnostic: Features a core that is independent of any front-end framework.
- Zero dependencies: Offers a streamlined, lightweight library.
- Unopinionated: Affords you the freedom to build anything you imagine.
- Progressively Enhanceable: Embraces web standards.
Currently, **Builder** offers support for React and React Native, with plans to extend compatibility to other front-end frameworks in the future.
Click the thumbnail below to watch the library's intro video.
## Install
Install the dependencies via your preferred package manager.
```shell
pnpm install @coltorapps/builder @coltorapps/builder-react
```
## Concepts
### Attributes
Think of attributes as the props of your entities. For instance, a text field may include attributes such as a label, a requirement flag, a maximum length, and others. Attributes are atomic, enabling their reuse across various entities.
```ts
import { z } from "zod";
import { createAttribute } from "@coltorapps/builder";
export const labelAttribute = createAttribute({
name: "label",
validate(value) {
return z.string().min(1).parse(value);
},
});
```
### Entities
Think of entities with attributes as components with props. For example, you can define a text field entity, and users can later add multiple instances of text fields to a form.
```ts
import { z } from "zod";
import { createEntity } from "@coltorapps/builder";
import { labelAttribute } from "./label-attribute";
export const textFieldEntity = createEntity({
name: "textField",
attributes: [labelAttribute],
validate(value) {
return z.string().optional().parse(value);
},
});
```
### Builders
Think of builders as collections of supported entities. For example, you can have a form builder that allows adding text and select fields to a form, but also another landing page builder that allows adding hero sections and feature sections to a landing page.
```ts
import { createBuilder } from "@coltorapps/builder";
import { textFieldEntity } from "./text-field-entity";
export const formBuilder = createBuilder({
entities: [textFieldEntity],
});
```
### Further Reading
For more information about core concepts, React integration, API references, and guides, please visit the documentation at [https://builder.coltorapps.com/](https://builder.coltorapps.com/).
## Development
#### Install dependencies
```sh
pnpm install
```
#### Build and run packages
```sh
pnpm dev
```
#### Run the tests
```sh
pnpm test
```
## Authors
- Alexandru Stratulat ([@sandulat](https://twitter.com/sandulat))
## License
MIT License