docs.easyblocks.io Open in urlscan Pro
2606:4700:4400::6812:282f  Public Scan

Form analysis
0 forms found in the DOM

Text Content

Easyblocks
Early accessLive demo
Search
⌃K

Links
Introduction
Getting started
Concepts
No-Code Components

External data
Powered By GitBook


INTRODUCTION


Welcome to Easyblocks - a visual building framework.
Easyblocks is a React toolkit (white-label editor + framework) for building
completely customised visual page builders.
It can help you build intuitive visual editors like those in Shopify (for
e-commerce), Mailchimp (landing pages), Splash (event pages) or Carrd (one
pagers). It can handle any visual building experience that outputs HTML/CSS or a
React component tree - from landing pages to dashboards.
Easyblocks can handle such a wide range of seemingly different visual
experiences thanks to a very clear separation between what's common for all
visual builders and what's custom and project-specific. The Easyblocks editor
knows how to handle common visual builder logic (drag&drop, nested selections,
inline rich text, responsive styling fields, etc), but at the same time doesn't
know anything about project-specific things like your components, data sources
or templates. Project-specific stuff can be defined with code using Easyblocks
framework, which is based on a novel concept called No-Code Components.
Watch Andrzej, our founder, explain the concept in the video:

MAIN FEATURES

Out-of-the-box visual building logic: drag&drop, nested selections, inline rich
text, multi-selection, styling fields (responsive), design tokens, history
management, localisation, templates, dynamic data
Simple for end-users. Not based on HTML/CSS but on No-Code Components.
Bring your own components and templates. You decide what components are
available, their variants, styling options, simplicity levels, children
components, constraints, etc.
Bring your own data. Connect any data source, fully control data fetching and
data picker widget. The data can be dynamic. For example, you can connect texts
or images from data sources in the editor.
Server-side rendering. Fully compatible with modern frameworks like next.js or
Remix, but can also render to pure HTML/CSS. All the heavy lifting happens on
the server - no browser rendering and layout shifts.

WHY?

If you need a custom text editor there are so many solutions available: Slate,
Lexical, TinyMCE, CKEditor, etc. But if you need a custom page builder there's a
huge chance you must build one from scratch. And it’s an awfully expensive and
tedious process.
The goal behind Easyblocks is to make it possible to create truly
state-of-the-art visual page building experiences in weeks instead of years,
without compromising flexibility.
Off-the-shelf OSS builders like Grape or Webstudio are based on HTML/CSS (they
have a panel with HTML nodes on the left and CSS properties on the right).
HTML/CSS is very powerful indeed but for many use cases it's too unconstrained
and too hard to use for non-technical users. At Easyblocks we dropped HTML/CSS
in favour of No-Code Components.
DEMOS

To play with our editor check out the live demo. In this example we configured
Easyblocks to be a simple e-commerce landing page content builder.
Below we're showing a quick editing video from Shopstory - a visual builder for
headless CMSes built on top of Easyblocks:
Shopstory (Easyblocks-based) + Sanity CMS
PROJECT STATUS

The early alpha of Easyblocks will be available this fall. If you're interested
in trying out Easyblocks as soon as possible please fill in the early access
form. We'll reach out to you shortly. We'd love to learn more about your use
case and prioritise our roadmap accordingly.
You can follow us on X for updates.
Under the hood it's a spin-off from Shopstory - a visual builder for headless
CMSes that drives millions of page views for e-commerce brands like Ace&Tate or
Tekla Fabrics.
MAIN CONCEPTS

NO-CODE COMPONENTS

Each selectable element added to an Easyblocks editor canvas must be a No-Code
Component. No-Code Component is a standard React component but extended with a
so called "No-Code Component Definition", a special object that makes this
component visually editable. In a No-Code Component Definition you can set data
properties, styling properties or children components slots available in the
visual editor when the component is selected. Such architecture allows
developers to build even complex components and keep a full control over what
should and should not be customisable for end-users.
Below we're showing a code of a very simple No-Code Component: ButtonGroup. It's
responsible for showing a collection ot buttons. End-users will be able to
modify layout, gap and alignment properties. The children components can be only
buttons, you can't place any other component in a ButtonGroup:
// ButtonGroup/ButtonGroupDefinition.ts
// No-Code Component Definition

export const buttonGroupDefinition : NoCodeComponentDefinition = {
id: "ButtonGroup", // unique id

// a list of fields available for end-users
schema: [
{
prop: "align",
label: "Align",
type: "radio-group",
options: [
{
value: "left",
label: "Left",
icon: "AlignLeft",
hideLabel: true,
},
{
value: "center",
label: "Center",
icon: "AlignCenter",
hideLabel: true,
},
{
value: "right",
label: "Right",
icon: "AlignRight",
hideLabel: true,
},
],
defaultValue: "left",
responsive: true // responsive property
},
{
prop: "verticalLayout",
label: "Vertical layout",
type: "boolean",
responsive: true // responsive property
},
{
prop: "gap",
label: "Gap",
type: "space",
},

/*
Button Group can only take components of type @easyblocks/button,
no other component type is allowed. It prevents users from screwing
up the layout and also allows Easyblocks editor to always show the
correct set of templates.
*/
{
prop: "Buttons",
label: "Buttons",
type: "component-collection",
accepts: ["@easyblocks/button"],
placeholderAppearance: {
width: 120,
height: 40,
label: "Add button"
}
},
],

/**
styles function code for generating CSS is very simple and has
no media queries. Regardless of this fact gap, align and space
properties are responsive, users can change their values on mobile.
Everything happens automatically.
**/
styles: ({ values }) => {

// Align set by parent component overrides own align property
const align = params.align ?? values.align ?? "left";

let flexAlign = "flex-start";
if (align === "center") {
flexAlign = "center";
} else if (align === "right") {
flexAlign = "flex-end";
}

return {
styled: {
ButtonsContainer: {
display: "flex",
flexWrap: "wrap",
flexDirection: values.verticalLayout ? "column" : "row",
justifyContent: values.verticalLayout ? "normal" : flexAlign,
alignItems: values.verticalLayout ? flexAlign : "center",
gap: values.gap,
},
}
};
},
/**
editing function controls the editing experience based on
current parameters and values:
- fields visibility
- selection frame behaviour (like plus button position placement)
- you can make certain fields to be displayed in child component
**/
editing: ({ params, values, editingInfo }) => {
const alignField = editingInfo.fields.find(
field => field.path === "align"
);

// Hide align field if it's forced by a parent component
if (params.align) {
alignField.visible = false;
}

return {
fields: editingInfo.fields,
components: {
/**
We can control the position of plus buttons on
the selection frame based on layout selected by user.
**/
Buttons: values.Buttons.map(() => ({
direction: values.verticalLayout ? "vertical" : "horizontal",
})),
},
};
},
};

// ButtonGroup/ButtonGroup.ts
// Button React Component code

export function ButtonGroup(props) {
const { Buttons } = props.__easyblocks.children; // ReactElement[]
const { ButtonsContainer } = props.__easyblocks.styled; // ReactElement

return (
<ButtonsContainer.type {...ButtonsContainer.props}>
{Buttons.map((Button, index) => (
<Button.type {...Button.props} key={index} />
))}
</ButtonsContainer.type>
);
}


Watch the video to see the ButtonGroup No-Code Component in action:

The ButtonGroup component only scratches the surface of what's possible with
Easyblocks. To learn more you can go to the No-Code Components section where we
describe in more detail the concepts of the architecture (code examples, videos,
etc).
EXTERNAL AND DYNAMIC DATA

When you build a custom visual builder you usually want to connect it to the
data that is specific to your product. Easyblocks allows for a full control over
external data:
connect any external data sources, create custom widgets and fetching functions
override media sources
connect dynamic data to text fields, images, videos, etc

Please read External Data section to learn more.
LICENSE

The process of determining the best license is still in progress. We're
considering LGPL or some source-available type of license like Commons Clause.
Next
Getting started

Last modified 2h ago
On this page
Main Features
Why?
Demos
Project status
Main concepts
No-Code Components
External and dynamic data
License
To pick up a draggable item, press the space bar. While dragging, use the arrow
keys to move the item. Press space again to drop the item in its new position,
or press escape to cancel.

CookiesThis site uses cookies to deliver its service and to analyse traffic. By
browsing this site, you accept the cookie policy.
Reject all


Introduction
Getting started
Concepts
No-Code Components

External data
Powered By GitBook