xenrisezph / builder

Powerful React library for crafting your own form builders and beyond.

Builder

Powerful library for crafting your own form builders and beyond.

Website · GitHub · Twitter (X) · Watch Intro ►

Introduction

Builder is a versatile TypeScript library designed for crafting custom form builders and much more. You can also develop 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, mobile, 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, with plans to extend compatibility to other front-end frameworks in the future.

Click the thumbnail below to watch the library's intro video.

We are successfully using Builder in real-world production apps. However, it's important to note that the project is currently in the alpha stage, which means that breaking changes can occur even in minor or patch updates.

Install

Install the dependencies via your preferred package manager.

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.

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.

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.

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/.

Development

Install dependencies

pnpm install

Build and run packages

pnpm dev

Run the tests

pnpm test

Authors

• Alexandru Stratulat (@sandulat)

License

MIT License