robobyte-front-builder

A low-code UI builder, Report builder, Print Layout designer, and Navigation extension system for Next.js applications.

What's included

• UI Builder — drag-and-drop canvas for building data-driven views with 50+ components
• Report Builder — design and preview paginated reports
• Print Layout Designer — multi-zone print templates (header / body pages / footer)
• Navigator Builder — configure sidebar navigation
• Viewer — production read-only renderer for saved UI Builder views
• Navigation Extension API — inject nav items from the host app without forking the package
• KPI Components — 12 ready-to-use metric visualisations (gauge, trend, bullet chart, rating, countdown, …)
• Timer Engine — configurable auto-refresh timers per view
• Undo / Redo / Copy / Paste — full clipboard and history support in the builder

Requirements

| Dependency | Version | |---|---| | Node.js | ≥ 18 | | React / React DOM | ≥ 18 | | Next.js | ≥ 13 | | @mui/material | ≥ 7 | | AG Grid | ≥ 33 |

Installation

npm install robobyte-front-builder

Required peer dependencies

These must be installed in the host app (they must be shared as a single instance):

npm install \
  react react-dom next \
  @mui/material @mui/icons-material @mui/lab @mui/system \
  @mui/x-data-grid @mui/x-date-pickers @mui/x-internals @mui/x-virtualizer \
  @emotion/react @emotion/styled \
  ag-grid-community ag-grid-enterprise ag-grid-react \
  xlsx react-hot-toast

Everything else (dayjs, lodash, recharts, etc.) ships inside the package and does not need to be installed in the host app.

Setup

1. next.config.js

Add the package to transpilePackages so Next.js compiles the source-first package:

/** @type {import('next').NextConfig} */
const nextConfig = {
  transpilePackages: ['robobyte-front-builder'],
}

module.exports = nextConfig

2. Wrap your app

In pages/_app.js, wrap your tree with the provider:

import { RoboByteFrontBuilderProvider } from 'robobyte-front-builder'

export default function App({ Component, pageProps }) {
  return (
    <RoboByteFrontBuilderProvider
      baseURL="https://your-api.example.com"
      apiURL="https://your-api.example.com/api"
      getAccessToken={() => yourAuthModule.getToken()}
      getUser={() => yourAuthModule.getCurrentUser()}
    >
      <Component {...pageProps} />
    </RoboByteFrontBuilderProvider>
  )
}

3. Add pages

Create page files in your host app that re-export the builder pages:

// pages/ui-builder/[id].js
export { default } from 'robobyte-front-builder/UIBuilderPage'
// or:
import { UIBuilderPage } from 'robobyte-front-builder'
export default UIBuilderPage

| Host page path | Export to use | |---|---| | pages/ui-builder/[id].js | UIBuilderPage | | pages/ui-builder/views/index.js | ViewsList | | pages/viewer/[id].js | ViewerPage | | pages/report-builder/[id].js | ReportBuilderPage | | pages/report-builder/reports/index.js | ReportsList | | pages/report-builder/viewer/index.js | ReportViewer | | pages/navigator-builder/index.js | NavigatorBuilderPage | | pages/print-builder/index.js | PrintBuilderPage | | pages/print-builder/layouts/index.js | PrintLayoutsList |

Navigation Extension API

Inject nav items into the builder's sidebar from anywhere in the host app without touching this package:

import { useNavExtension } from 'robobyte-front-builder'

export default function MyFeatureModule() {
  useNavExtension({
    key: 'my-feature',
    label: 'My Feature',
    icon: <MyIcon />,
    href: '/my-feature',
    order: 10,
  })

  return <div>...</div>
}

RoboByteFrontBuilderProvider props

| Prop | Type | Description | |---|---|---| | baseURL | string | Base URL for file/asset requests | | apiURL | string | API base URL for all data endpoints | | getAccessToken | () => string | Called before each request to get the auth token | | getUser | () => object | Returns the current user object | | navExtensions | array | Static nav items to inject (alternative to useNavExtension) | | theme | object | MUI theme override |

Advanced: accessing builder context

For host apps that need to read or drive builder state programmatically:

import { useBuilder } from 'robobyte-front-builder'

const { schema, dispatch } = useBuilder()

Local development

To link the package locally without publishing:

// host app package.json
"robobyte-front-builder": "file:../../RoboByteFrontBuilder"

Run npm install once, then Next.js hot-reload picks up changes automatically.

Publishing

npm version patch   # bug fix  → 1.0.x
npm version minor   # feature  → 1.x.0
npm version major   # breaking → x.0.0
npm publish

Changelog

1.0.21

• Added Timer Engine — configurable auto-refresh timers per view (interval, cron, manual trigger)
• Added full Undo / Redo history with keyboard shortcuts (Ctrl+Z / Ctrl+Y)
• Added Cut / Copy / Paste with system clipboard support (Ctrl+X / Ctrl+C / Ctrl+V)
• Added Undo / Redo buttons to the viewer toolbar
• Expanded KPI component suite: Gauge, BulletChart, ColorScale, Rating, Countdown, AvatarGroup, StepStage
• Print Layout designer: multi-zone canvas (header / body / footer), @page CSS, print dialog

1.0.20

• KPI components: Metric, Trend, Badge, StatusDot, IconBox, Sparkline, MiniBarChart, Donut, Funnel, HeatmapGrid, TagList, Timeline, ComparisonBars
• Threshold engine and number formatting utilities
• Dark / light theme toggle in UI builder and Print Layout builder

1.0.x

• UI Builder, Report Builder, Navigator Builder, Print Builder initial releases
• Navigation Extension API
• AG Grid and MUI data grid integration
• Drag-and-drop canvas with 50+ components