Skip to main content

Installation

Install and set up the Buildocs UI Engine package in your application.

Requirements​

  • Node.js 18 or higher
  • Npm 9 or higher
  • React 18 or higher
  • TypeScript 4.9.5 or higher
  • A Buildocs UI Engine account

Install Package​

Install the package along with all required peer dependencies:

tip

Add to your project .npmrc: @buildocsdev:registry=https://npm.pkg.github.com/

after that run

npm install @buildocsdev/sdk@latest react-pdf@^10.3.0 @types/pdfjs-dist@^2.10.378 @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@^1.8.3 axios@^0.27.2 bootstrap@^5.3.8 i18next@^22 i18next-http-backend@^2.1.0 react-i18next@^12.1.1 react-icons@^5.5.0 react-redux@^8.0.2 react-router-dom@^6.4.1 react-tabulator@^0.21.0 xlsx@^0.18.5

Or using yarn:

yarn add @buildocsdev/sdk@latest react-pdf@^10.3.0 @types/pdfjs-dist@^2.10.378 @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@^1.8.3 axios@^0.27.2 bootstrap@^5.3.8 i18next@^22 i18next-http-backend@^2.1.0 react-i18next@^12.1.1 react-icons@^5.5.0 react-redux@^8.0.2 react-router-dom@^6.4.1 react-tabulator@^0.21.0 xlsx@^0.18.5

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="6f3fc8f2-ac4b-4321-93f9-945bc0e0b664">
          <FormHostProvider>
              <div style={{ paddingBottom: '5rem', display: 'flex', justifyContent: 'flex-end', padding: '16px' }}>
                <LanguageSwitcher />
              </div>
              <div>
                <Form
                  key={language}
                  params={{
                    formCode: "FORM001",
                    guid: "new",
                    pluginCode: "CUSTOMCODE",
                    pGuid: "PROJECTGUID",
                  }}
                  enableEventHandlers={true}
                />
              </div>
          </FormHostProvider>
        </BuildocsProvider>
      </BrowserRouter>
    </I18nextProvider>
  );
}

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


Providers​

Two providers must wrap every Form component:

  • BuildocsProvider — comes from @buildocsdev/sdk. Pass your apiKey to it. It supplies authentication and configuration to all SDK internals.
  • FormHostProvider — a component you implement. It bridges form events (save, upload, load) to your backend. See Implementing FormHostProvider for the step-by-step guide.

Required Dependencies​

UI Framework:

  • @emotion/react - CSS-in-JS library
  • @emotion/styled - Styled components for Emotion
  • @mui/material - Material-UI core components
  • @mui/icons-material - Material-UI icons
  • @mui/system - MUI system utilities
  • @mui/x-tree-view - Tree view components
  • bootstrap - CSS framework

Core Functionality:

  • react-pdf (v10+) - PDF viewing (version 10+ required)
  • react-tabulator - Table components
  • @react-spring/web - Animation library
  • @reduxjs/toolkit - State management
  • react-redux - Redux React bindings
  • react-router-dom - Routing
  • react-icons - Icon library
  • xlsx - Excel file handling

Internationalization:

  • i18next - i18n framework
  • i18next-http-backend - Backend loading for i18next
  • react-i18next - React bindings for i18next

Utilities:

  • axios - HTTP client

Next Steps​

After installation, proceed to SDK Configuration to set up the providers, or to Iframe Configuration to configure iframe-based viewing.