1
Install the SDK package
Add the SDK to your application using npm, yarn, or pnpm.
Integrations
Bring Formiq workflows into your own product stack.
The integrations page introduces the Formiq SDK for teams that want to embed Formiq capabilities into their own systems. Instead of sending users elsewhere, you can place the board editor experience inside your product with the published SDK package.
Built around the published @francistinao/formiq-sdk package
Useful for custom dashboards, internal tools, and partner platforms
Keeps the editing workflow inside your own application experience
badge-generator.ts
Before
// Building your own layout generator from scratch
import PDFDocument from 'pdfkit'
import fs from 'fs'
async function generateBadges(guests: Guest[]) {
for (const guest of guests) {
const doc = new PDFDocument({ size: 'A4' })
const out = fs.createWriteStream(`badge-${guest.id}.pdf`)
doc.pipe(out)
doc.fontSize(24).text(guest.name, 100, 100)
doc.fontSize(12).text(guest.company, 100, 140)
// manually position every element...
// handle fonts, images, margins yourself...
// loop through 500 guests one by one...
doc.end()
}
}
// 200+ lines of manual layout code
// No templates. No bulk export. No team sync.VS
Formiq SDK
// With the Formiq SDK — embed and done
import { FormiqProvider, BoardEditor } from '@francistinao/formiq-sdk'
import '@francistinao/formiq-sdk/styles.css'
export default function App() {
return (
<FormiqProvider token={process.env.FORMIQ_TOKEN}>
<BoardEditor
boardId="your-board-id"
onExport={(url) => console.log('PDF ready:', url)}
/>
</FormiqProvider>
)
}
// Templates, bulk generation, and asset
// distribution — all in one component.Process
How it works in practice
2
Wrap your app with the provider
Use the SDK provider and pass your token so the embedded components can authenticate.
3
Mount the board editor
Render the editor in your own interface and connect it to the board you want users to manage.