API Reference & Customization

This reference covers the <Rule> component props, the server-side helper, customization options, and troubleshooting.

Component API

`<Rule />`

The main React component for the embedded editor.

import { Rule } from "@rulebricks/embedded";

Prop	Type	Default	Description
`embedToken`	`string`	Required	The JWT generated by your backend.
`height`	`number`	`600`	Height of the editor in pixels.
`apiBaseUrl`	`string`	(Origin)	Base URL for API calls (use for self-hosted).
`showControls`	`boolean`	`true`	Show/hide the top toolbar (Undo, Redo, Publish).
`showFooter`	`boolean`	`true`	Show/hide the status bar (row count, search).
`showRowSettings`	`boolean`	`false`	Show gear icon for row-level settings.
`requestLabel`	`string`	"Request"	Custom label for the input columns section.
`responseLabel`	`string`	"Response"	Custom label for the output columns section.
`onSave`	`func`	-	Callback fired after auto-save `(e) => {}`.
`onPublish`	`func`	-	Callback fired after publishing `(e) => {}`.
`onError`	`func`	-	Callback fired on errors `(e) => {}`.

`createEmbedToken(options)`

Server-side helper to generate tokens.

import { createEmbedToken } from "@rulebricks/embedded/server";
 
const { token } = await createEmbedToken({
  apiKey: "rb_live_...", // Required
  ruleId: "rule_123", // Required
  expiresIn: 3600, // Optional (default: 1h)
  baseUrl: "...", // Optional (for self-hosted)
});

Programmatic Control (Refs)

You can interact with the component instance using a React Ref. This is useful for building external "Test" buttons or custom export flows.

const ruleRef = useRef(null);
// ...
<Rule ref={ruleRef} embedToken={token} />;

Methods

testRule(payload): Runs a test against the current rule state. Highlights matching rows in the UI.

const result = await ruleRef.current.testRule({ age: 25, type: "standard" });
console.log(result.response); // The rule output
console.log(result.successIdxs); // Indices of matching rows

clearTestResults(): Clears the visual highlighting from a previous test.
getRule(): Returns the current JSON structure of the rule.
isTestLoading(): Returns true if a test is currently executing.

Branding & Customization

The embed automatically inherits branding from your Rulebricks organization settings (Colors, Fonts, Border Radius). No client-side config is needed for this.

Manual Overrides (CSS)

If you need to override styles manually or create a dark mode workaround, target the data-embed-container attribute to ensure scoped styling.

/* Override primary color */
[data-embed-container="true"] {
  --rb-color-primary: #ff5733;
  --rb-color-accent: #33ff57;
  --rb-font-family: "Inter", sans-serif;
  --rb-border-radius: 8px;
}
 
/* Dark mode override example */
[data-embed-container="true"] .bg-white {
  background-color: #1e1e1e !important;
  color: #ffffff !important;
}

Troubleshooting

Error	Possible Cause	Solution
"No embed token provided"	`embedToken` prop is null/undefined.	Ensure your fetch completes before rendering.
HTTP 401 / Invalid Token	Token expired or API Key revoked.	Generate a fresh token; check API key validity.
HTTP 403 / Access Denied	User/Key lacks permission for this rule.	Check Rulebricks permissions for that API key.
Styles missing/broken	CSS file not imported.	Add `import "@rulebricks/embedded/styles.css"`.
Hydration Error (Next.js)	SSR mismatch.	Use `next/dynamic` with `{ ssr: false }`.

Debugging

Pass an onError handler to the component to catch and log issues:

<Rule onError={(e) => console.error("Rulebricks Error:", e)} ... />

Permissions & Security Architecture