Install the SDK

Requirements

Node.js 18 or higher
npm 9 or higher
React 18 or higher
TypeScript 4.9.5 or higher
A Buildocs account

Install

Install the SDK together with all required peer dependencies.

Using npm:

npm install @buildocsdev/sdk@latest react-pdf@^10.3.0 @emotion/react@^11 @emotion/styled@^11 @mui/material@^5 @mui/icons-material@^5 @mui/system@^5 @mui/x-tree-view@^7 @react-spring/web@^9.7.4 @reduxjs/toolkit@^2.0.0 axios@^1.0.0 bootstrap@^5.3.8 i18next@^25 i18next-http-backend@^3.0.5 react-hook-form@^7.66.1 react-icons@^5.5.0 react-i18next@^16 react-redux@^9.0.0 react-router-dom@^6.4.1 react-toastify@^9.0.0 xlsx@^0.18.5 --force

Using yarn:

yarn add @buildocsdev/sdk@latest react-pdf@^10.3.0 @emotion/react@^11 @emotion/styled@^11 @mui/material@^5 @mui/icons-material@^5 @mui/system@^5 @mui/x-tree-view@^7 @react-spring/web@^9.7.4 @reduxjs/toolkit@^2.0.0 axios@^1.0.0 bootstrap@^5.3.8 i18next@^25 i18next-http-backend@^3.0.5 react-hook-form@^7.66.1 react-icons@^5.5.0 react-i18next@^16 react-redux@^9.0.0 react-router-dom@^6.4.1 react-toastify@^9.0.0 xlsx@^0.18.5 react-color@^2.19.3 react-dnd@^16.0.1 react-dnd-html5-backend@^16.0.1 react-dnd-scrolling@^1.3.3 react-dnd-touch-backend@^16.0.1 react-player@^2.16.0

Basic usage

import ReactDOM from 'react-dom/client';
import { BrowserRouter } from 'react-router-dom';
import { I18nextProvider, useTranslation } from 'react-i18next';
import { FormHostProvider } from './provider/formhostprovider';
import { BuildocsProvider, LanguageSwitcher } from '@buildocsdev/sdk';
import { Form } from '@buildocsdev/sdk/form';

import '@buildocsdev/sdk/form.css';
import '@buildocsdev/sdk/formcanvas.css';
import '@buildocsdev/sdk/providers/theme.css';
import i18n from './i18n';

function App() {
  const { i18n: { language } } = useTranslation();
  return (
    <I18nextProvider i18n={i18n}>
      <BrowserRouter>
        <BuildocsProvider apiKey="[project-api-key]">
          <FormHostProvider>
            <div style={{ display: 'flex', justifyContent: 'flex-end', padding: '16px' }}>
              <LanguageSwitcher />
            </div>
            <Form
              key={language}
              params={{
                formCode: "FORM001",
                guid: "new",
                pluginCode: "OPTIONAL_PLUGIN_CODE",
                pGuid: "OPTIONAL_PROJECT_GUID",
              }}
              enableEventHandlers={true}
            />
          </FormHostProvider>
        </BuildocsProvider>
      </BrowserRouter>
    </I18nextProvider>
  );
}

ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(<App />);

Providers

Two providers must wrap every Form component:

Provider	Source	Purpose
`BuildocsProvider`	`@buildocsdev/sdk`	Supplies your API key and configuration to all SDK internals
`FormHostProvider`	Implemented by you	Bridges form events to your backend

See FormHostProvider for the implementation guide.

Dependency reference

UI framework

@emotion/react, @emotion/styled — CSS-in-JS
@mui/material, @mui/icons-material, @mui/system, @mui/x-tree-view — Material UI
bootstrap — CSS framework

Core functionality

react-pdf (v10+ required) — PDF viewing
react-hook-form — form state management
react-toastify — toast notifications
@react-spring/web — animations
@reduxjs/toolkit, react-redux — state management
react-router-dom — routing
react-icons — icons
xlsx — Excel file handling

Internationalization

i18next, i18next-http-backend, react-i18next

Utilities

axios — HTTP client

note

tabulator-tables is bundled inside the SDK — no separate install required.

Next step

Proceed to FormHostProvider to wire these endpoints into the SDK.

Requirements​

Install​

Basic usage​

Providers​

Dependency reference​

Next step​