Page builder and Layout builder

A page builder or grid layout builder based on GradStack.js that provides full React control over component layout, loading and saving, and provides callback functions for adding custom components by dragging or clicking.

- Page builder or Layout builder
- Demo project
- Basic Usage
- Create your project
- install gridstack.js
- install gridstack-page
- Prepare API and custom components for loading and saving page.
- Create API functions used to save and load pages as following api.ts.
- Create your custom react components as widget to add layout.
- Add stackpage page builder as following.

Demo project

https://github.com/aidabo/gridstack-page-builder

Following API, custom components, callback function samples all in demo project.

Basic Usage

$3

$3

npm i gridstack or yarn add gridstack

$3

npm i gridstack-page or yarn add gridstack-page

Prepare API and custom components for loading and saving page.

$3

You can just use localStorage of browser or json server , the demo uses json server.

``js
import { PageProps } from "gridstack-page"

const webApiUrl = "/api"

const apiJsonHeaders = {
'Accept': 'application/json',
'Content-Type': 'application/json',
};

export { apiJsonHeaders, webApiUrl}

export const useLayoutStore = () => {
const dataUrl = ${webApiUrl}/pages;

async function getPageList(): Promise {
try {
const response = await fetch(${dataUrl},{
method: "GET",
headers: apiJsonHeaders,
});
if (!response.ok) {
throw new Error(HTTP error! Status: ${response.status});
}
const data = (await response.json()) as PageProps[];
return data;
} catch {
//console.error("fetchPageList error:", error);
return false;
}
}

async function getPageById(pageId: string): Promise {
try {
const response = await fetch(${dataUrl}/${pageId},{
method: "GET",
headers: apiJsonHeaders,
});
if (!response.ok) {
throw new Error(HTTP error! Status: ${response.status});
}
const data = (await response.json()) as PageProps;
return data;
} catch (error) {
console.error("getPageById error:", error);
return false;
}
}

async function exists(pageId: string): Promise {
const result = await getPageById(pageId);
return result != null && result !== false;
}

async function savePage(data: PageProps): Promise {
if (!(await exists(data.id))) {
return await insertPage(data);
} else {
return await updatePage(data);
}
}

async function insertPage(data: PageProps): Promise {
try {
const response = await fetch(${dataUrl}, {
method: "POST",
headers: apiJsonHeaders,
body: JSON.stringify(data),
});
if (!response.ok) {
throw new Error(HTTP error! Status: ${response.status});
}
const result = (await response.json()) as PageProps;
return result;
} catch (error) {
console.error("insertPage error:", error);
return false;
}
}

async function updatePage(data: PageProps): Promise {
try {
const response = await fetch(${dataUrl}/${data.id}, {
method: "PUT",
headers: apiJsonHeaders,
body: JSON.stringify(data),
});
if (!response.ok) {
throw new Error(HTTP error! Status: ${response.status});
}
const result = (await response.json()) as PageProps;
return result;
} catch (error) {
console.error("updatePage error:", error);
return false;
}
}

async function deletePage(pageId: string): Promise {
try {
const response = await fetch(${dataUrl}/${pageId}, {
method: "DELETE",
headers: apiJsonHeaders,
});
if (!response.ok) {
throw new Error(HTTP error! Status: ${response.status});
}
const result = (await response.json()) as PageProps;
return result;
} catch (error) {
console.error("deletePage error:", error);
return false;
}
}
`

$3

Following create custom component Image ImageBlurred, ImageCircle, SimpleCard

`js
import { ComponentMap } from "gridstack-page";
import { ComponentProps } from "gridstack-page";

const useComponentProvider = () => {

const getNewComponentMap = (): ComponentMap => {

return {
Image: function Image({ src, title }: { src: string; title?: string }) {
return (


SimpleCard: {
src: "https://images.unsplash.com/photo-1682407186023-12c70a4a35e0?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2832&q=80",
content: Growth is not just about numbers, it's about the journey. and the people we meet along the way. life is a journey, not a destination. experience is the best teacher.
Growth is not just about numbers, it's about the journey. and the people we meet along the way. life is a journey, not a destination. experience is the best teacher.
Growth is not just about numbers, it's about the journey. and the people we meet along the way. life is a journey, not a destination. experience is the best teacher.,
date: "20 July 2022",
author: "Ai Dabo",
caption: "This think item",
title: "This is SimpleCard",
},
};
};

return { getNewComponentMap, getNewComponentProps };
};

export { useComponentProvider };

`

$3

`js
import { useState } from "react";
import { useParams, useNavigate } from "react-router-dom";

// Here is lib import ----
import { StackPage } from "gridstack-page";
import {
PageProps,
SaveLayoutFn,
LoadLayoutFn,
GoBackListFn,
} from "gridstack-page";
import "gridstack-page/styles"


import { useLayoutStore } from "./api";
import { useComponentProvider } from "./my-components";

export default function StackPageEdit(props: {mode: string}) {
const { pageid } = useParams<{ pageid: string }>();
const [currentPageid, setCurrentPageid] = useState(pageid || "");

const { getPageById, savePage } = useLayoutStore();
const { getNewComponentMap, getNewComponentProps } = useComponentProvider();
const navigate = useNavigate();

// page save callback
const saveLayout: SaveLayoutFn = async (
pageid: string,
pageProps: PageProps
) => {
await savePage(pageProps);
if(pageid !== pageProps.id) {
navigate(/edit/${pageProps.id});
}
};

// page load callback
const loadLayout: LoadLayoutFn = async (
pageid: string
): Promise => {
setCurrentPageid(pageid);
const page: any = await getPageById(pageid);
if (page === false) {
console.log("new page created: " + pageid);
}
return page;
};

// page list return callback
const gobackList: GoBackListFn = () => {
navigate("/");
};

return (
<>
pageid={currentPageid as any}
pageMode={props.mode as any}
onSaveLayout={saveLayout}
onLoadLayout={loadLayout}
gobackList={gobackList}
// can ignore
componentMapProvider={getNewComponentMap}
componentPropsProvider={getNewComponentProps}
/>

);
}

``