Public API

CategoryWrapper

// docs/src/theme/DocSidebarItem/Category/index.js
export default function CategoryWrapper(props: {
  item: {
    label: string;
    customProps?: { selfHosted?: boolean };
    [key: string]: unknown;
  };
}): JSX.Element;

Wraps the Docusaurus sidebar category item. When item.customProps.selfHosted is true, it appends a premium badge SVG to the label. Use this when customizing the ToolJet docs sidebar to mark self-hosted-only features.

LinkWrapper

// docs/src/theme/DocSidebarItem/Link/index.js
export default function LinkWrapper(props: {
  item: {
    label: string;
    customProps?: { selfHosted?: boolean };
    [key: string]: unknown;
  };
}): JSX.Element;

Same pattern as CategoryWrapper but for leaf link nodes in the sidebar. Apply when a specific docs page should carry the self-hosted premium badge in the sidebar navigation.

DocsCard / DocsCardList

// docs/src/components/DocsCard/index.js
export { DocsCard } from "./DocsCard";
export { DocsCardList } from "./DocsCardList";

React components used in MDX documentation pages to render card grids for navigation. DocsCard represents a single card entry; DocsCardList wraps multiple cards into a responsive grid. Use them in any Docusaurus MDX page to create structured feature or tutorial landing sections.

Cypress file preprocessor plugin

// cypress-tests/cypress/plugins/index.js
module.exports = (on: Cypress.PluginEvents, config: Cypress.PluginConfigOptions) => void;

Registers @cypress/webpack-preprocessor for Cypress using the project's shared webpack.config. Called automatically by Cypress on project open. Wire this if you are integrating ToolJet's E2E tests into your own Cypress setup.

Working examples

Scenario - Embedding DocsCard in a custom MDX page

You want to create a documentation landing page with navigation cards pointing to sub-sections of your integrated ToolJet docs.

// docs/src/pages/my-landing.mdx  (Docusaurus MDX)
import { DocsCard, DocsCardList } from '../components/DocsCard';

# My ToolJet Integration Guide

<DocsCardList>
  <DocsCard header="Setup" href="/docs/setup">
    Deploy ToolJet with Docker or Kubernetes.
  </DocsCard>
  <DocsCard header="Plugins" href="/docs/plugins">
    Build and publish custom data source connectors.
  </DocsCard>
  <DocsCard header="API Reference" href="/docs/api">
    Explore the NestJS REST API endpoints.
  </DocsCard>
</DocsCardList>

Scenario - Customizing the sidebar to flag self-hosted features

You are white-labeling ToolJet docs and want certain sidebar entries to display a premium badge automatically.

// docs/sidebars.json (excerpt)
{
  "type": "doc",
  "id": "setup/kubernetes",
  "label": "Kubernetes",
  "customProps": {
    "selfHosted": true
  }
}

// docs/src/theme/DocSidebarItem/Link/index.js is already wired
// No additional code needed; Docusaurus swizzle picks it up automatically.
// Verify by importing the wrapper in your Docusaurus config:
// docusaurus.config.js
module.exports = {
  // ...
  themes: [],
  // Swizzling is automatic once the file exists at the path above.
};

Scenario - Running ToolJet Cypress E2E tests in your CI pipeline

You want to add ToolJet's app-builder Cypress suite to your GitHub Actions workflow.

// cypress-tests/cypress/plugins/index.js is the entry point.
// Reference it in your cypress config:

// cypress.config.ts
import { defineConfig } from 'cypress';

export default defineConfig({
  e2e: {
    baseUrl: 'http://localhost:80',
    specPattern: 'cypress-tests/cypress/e2e/**/*.cy.js',
    setupNodeEvents(on, config) {
      // Load the ToolJet webpack preprocessor
      const pluginFn = require('./cypress-tests/cypress/plugins/index.js');
      pluginFn(on, config);
      return config;
    },
  },
});

# Run from project root
npx cypress run --config-file cypress.config.ts --spec "cypress-tests/cypress/e2e/app-builder/**"

File walkthrough

• .do/ - Contains deploy.template.yaml for one-click DigitalOcean App Platform deployment.
• .github/ - Houses all CI workflows: Docker builds, Cypress runs, code coverage, CodeQL, Netlify deploys, and PR automation.
• .vscode/ - Pre-configured launch configs for debugging the NestJS server and frontend together; shared workspace settings.
• cli/ - TypeScript CLI with commands plugin:create, plugin:install, plugin:delete, and info; built with oclif.
• cypress-tests/ - Full Cypress E2E suite split across app-builder, marketplace, and platform configs; uses custom webpack preprocessing.
• deploy/ - Kubernetes manifests, Helm charts, and cloud-provider-specific IaC templates.
• docker/ - Production and development Dockerfiles; entrypoint shell scripts for initializing the database and starting services.
• docs/ - Docusaurus v2 site with custom sidebar badge components, card components, and a dev-server plugin.
• frontend/ - React + Webpack SPA; the drag-and-drop app builder UI with 60+ components.
• plugins/ - Individual connector packages (PostgreSQL, MySQL, Stripe, S3, etc.) consumed by the server at runtime.
• server/ - NestJS application: REST API, TypeORM entities, auth (JWT/SSO), query execution engine, plugin loader.
• docker-compose.yaml - Orchestrates Postgres, the NestJS server, and the frontend for local development.
• package.json - Root-level npm workspace manifest; declares ESLint and Prettier dev dependencies.

Common pitfalls and fixes

• Missing LOCKBOX_MASTER_KEY: The server will crash on boot with a cryptic error. Generate with openssl rand -hex 32 and set in server/.env.
• ESM/CJS interop in the CLI: The CLI uses ts-node with CJS output; do not set "type": "module" in cli/package.json or imports will break.
• Cypress webpack config path: cypress/plugins/index.js hard-references ../webpack.config; if you move the plugins file, update this relative path or Cypress preprocessing will silently fall back to no transpilation.
• Docusaurus swizzle conflicts: CategoryWrapper and LinkWrapper override @theme-original components; running docusaurus swizzle afterward on the same components will overwrite your customizations.
• TypeORM migration drift: After pulling new server code, always run npm run typeorm migration:run inside server/; skipping this causes 500 errors on entity relations.
• Peer dependency version pins: @typescript-eslint/eslint-plugin must match the version of @typescript-eslint/parser exactly; mismatches produce parser rule conflicts at lint time. Pin both to the same semver.

Vibe-coding prompt template

I have integrated the ToolJet source into my project under `./tooljet-source/`.
I also have `USAGE.md` (the integration guide) in my project root.
The upstream package is `user@example.com`.

Please help me integrate ToolJet into my existing Node.js/TypeScript project step by step:

1. Read `USAGE.md` and the file structure under `tooljet-source/` to understand what is available.
2. Wire the NestJS server from `tooljet-source/server/` as a sub-application or standalone service.
3. Set up the required environment variables listed in `USAGE.md`.
4. Configure TypeScript path aliases so I can import from `@server/` and `@plugins/`.
5. Add the Cypress E2E tests from `tooljet-source/cypress-tests/` to my CI config.
6. If I need custom docs, show me how to use `DocsCard` and `DocsCardList` from `tooljet-source/docs/src/components/DocsCard/`.
7. Show me how to scaffold a new plugin using the CLI at `tooljet-source/cli/`.

Use only the real exports and file paths documented in `USAGE.md`. Do not invent APIs.

License and credit

ToolJet is released under the GNU Affero General Public License v3.0 (AGPL-3.0). See source/LICENSE for the full text. When embedding or modifying ToolJet in a networked service, the AGPL requires that you make your modifications available under the same license.

Upstream repository and package: github.com/ToolJet/ToolJet / tooljet on npm.

This product’s unique contribution is clean room implementation of valuable code block into AVCP compatible standard.

The full install guide and integration prompts unlock after purchase.