IFC Viewer SDK

Embed a complete IFC viewer in any app

Free forever, commercial use included. Up to 2,000 opens/month.

Use for free Talk to Sales
  • IFC 2x3, IFC4, IFC4x3
  • BCF 2.1 & 3
  • IDS 1.0
  • React, Vue, Angular, TypeScript
12.5m8.2m

In production

BIMBoss
TaskXS
Live Demo

See it running in your browser

BCF 3.0 coloring applied to the NBU Medical Clinic IFC model. Rotate, section, and inspect.

flinker.app · IFC Viewer SDK – BCF Coloring Demo
Open ↗

View all SDK examples →

From zero to running viewer in minutes

1

Import one CDN module

Add a <script type="module"> from Flinker's CDN. No npm install, no build step.

2

Pass your IFC bytes

Call viewer.add() with a Uint8Array. Parsing and 3D rendering happen entirely in-browser.

3

Connect to your product

Wire viewer events (selections, BCF viewpoints, colorings, filters) to your own UI.

View SDK documentation →

A complete viewer workflow, not just a canvas

Browser IFC Viewer
WebGL 2 rendering for large enterprise-scale datasets.
Federated Model Review
Load multiple discipline models (architecture, structure, MEP) into one viewer session.
Model Tree & Navigation
Navigate the full spatial structure, IFC classes, storeys, and model components.
Element Properties
Inspect IFC element data, names, GlobalIds, types, and property sets on click.
Selection & Highlighting
Select one or many elements. Connect selections to your own tables, tickets, forms, or analytics.
Visibility Control
Hide, show, isolate, and focus model elements.
Coloring
Color elements by status, risk, progress, cost, or any business attribute.
Clipping & Section Views
Cut into the model to inspect spaces, floors, shafts, rooms, services, and internal construction details.
BCF Coordination
Load, create, and exchange BCF topics with camera position, selected elements, visibility, and clipping state.
IDS Validation
Run IDS checks and show failed elements directly in the 3D view.
Viewpoints
Store and restore camera, selection, visibility, coloring, and clipping context as portable openBIM view state.
Local Processing
IFC parsing and WebGL rendering happen inside the browser. Files are never transferred to a Flinker server.

Five lines. A complete IFC viewer.

No backend, no config files.

<!-- 1. Add the viewer element -->
<bim-grid id="ifc-viewer"></bim-grid>

<script type="module">
  // 2. Import — no npm install required
  import { IfcViewer } from "https://cdn.flinker.app/ifc-viewer/v3.3.0/ifc-viewer.es.js";

  // 3. Mount and wait for ready
  const viewer = new IfcViewer("#ifc-viewer");
  await viewer.ready;

  // 4. Pass IFC bytes from your app — file never leaves the browser
  const response = await fetch("/models/project.ifc");
  const bytes = new Uint8Array(await response.arrayBuffer());
  await viewer.add("project.ifc", bytes);
</script>
Full documentation API reference SDK examples
Pricing

Free forever. No surprises when you grow.

No trial period, no hidden limits. Upgrade when you outgrow 2,000 opens/month or need to remove Flinker branding.

Most popular
Community
up to 2,000 opens/mo
€0
free · commercial use included
  • Full viewer feature set
  • IFC 2x3, IFC4, IFC4x3
  • BCF 2.1 & 3, IDS 1.0
  • React, Vue, Angular, TypeScript
  • CDN import, no npm required
  • Flinker branding required
Use for free
Pro
up to 3,000 opens/mo
€300
/ month · annual billing
  • Everything in Community
  • White-label — no Flinker branding
  • Email support
  • Self-serve upgrade
  • Annual pre-pay (€3,600/yr)
Get Pro
Enterprise
3,000+ opens/mo
Custom
contact us for pricing
  • Everything in Pro
  • Priority support + SLA agreement
  • Dedicated contact
  • ERP integration (SAP, Oracle, Dynamics)
  • Microsoft Azure, Fabric & Foundry ready
  • On-premise & private cloud deployment
  • Custom contract & volume pricing
Contact Sales

All prices are exclusive of VAT.

Where teams embed it

Your app stays in control of authentication, file access, and permissions. The viewer handles IFC rendering.

CDE & Document Platform

Load IFC files from project folders and show the model next to metadata, approvals, and revision history.

Digital Twin

Show the BIM model next to sensor data, asset records, maintenance logs, or operational dashboards.

Project Management App

Connect selected elements and BCF viewpoints to tasks, issues, comments, and saved views.

ERP & Procurement

Color and select model elements by work package, cost code, vendor, or procurement status.

Analytics Dashboard

Load IFC geometry next to tables, charts, validation results, quantities, and status fields.

Facility Management

Navigate spaces, assets, equipment, COBie data, and handover information in one browser view.

For AI Coding Assistants

Works with Copilot, Claude, and Codex

Paste this prompt. Get a working IFC viewer without any sign-up step.

Add a fully working browser IFC viewer with the Flinker IFC Viewer SDK.
Use this import:
import { IfcViewer } from "https://cdn.flinker.app/ifc-viewer/v3.3.0/ifc-viewer.es.js";

Mount it into a <bim-grid id="ifc-viewer"></bim-grid> element.
Create the viewer with new IfcViewer("#ifc-viewer").
Await viewer.ready before loading files.
Convert IFC, BCF, or fragment files to Uint8Array and call viewer.add(file.name, bytes).
Do not upload the IFC file to a backend just to view it.
SDK Documentation API Reference Code Examples

Frequently Asked Questions

Can't find the answer you're looking for?
Contact our team

Do I need an account or API key to use the SDK?

No. The Community plan works by importing the CDN ES module directly — no account, no API key. Import the module, create new IfcViewer(...), and you have a working viewer. The Community plan is subject to a 2,000 opens/month limit and requires Flinker branding to remain visible in the viewer.

No. Your application reads or fetches the file, converts it to Uint8Array, and passes it to viewer.add(). IFC parsing and WebGL rendering happen entirely inside the visitor's browser. Files are never transferred to a Flinker server.

The SDK mounts into a DOM element and works with any framework that supports browser ES modules: React, Vue, Angular, TypeScript, Svelte, or plain HTML.

One viewer open is counted each time viewer.add() is called to load a model file. Loading multiple discipline models in one session (federated review) counts as one open per file loaded.

Yes. The Community plan is free up to 2,000 opens per month with no time limit. Flinker branding must remain visible in the viewer on the Community plan. When you need more opens or want to remove the branding, upgrade to Pro or Enterprise.

Yes. Pro and Enterprise are fully white-label. Community requires Flinker branding.

No. The standard integration uses Flinker's CDN ES module — one import line. No build pipeline changes are required.

All prices shown are exclusive of VAT. VAT will be applied where required based on your location.

Start building. It's free.

Import one CDN module. No account, no credit card required. Upgrade when you're ready.

Use for free Talk to Sales