IFC Viewer Online

Open an IFC file and get a Health Score (0 to 100) in 30 seconds. Then put it on a map, measure it, compare it and turn it into a live digital twin.

A free IFC viewer, validator and digital-twin toolkit that runs entirely in your browser. No account. No file size limit. Your models never leave your machine.

→ Try it live · Demos · SDK docs · Blog

Read this in your language

English · 简体中文 · Español · Français · Deutsch · 日本語 · Português · Català · Italiano · ไทย

Health Score and Fix this first → a live city twin → sun and climate → point clouds → Clip Studio. All in your browser. Try it live →

In one sentence: drag in one IFC or a whole federated project, see it in 3D (on a real map if you want), get a Health Score with the issues to fix first, fix the common ones in a click, measure and compare versions, and export a corrected file, BCF or report. Nothing is uploaded to a server.

Contents

• What it does

• See it in action

• Embed it: iframe, SDK, WordPress

• How it works

• Getting started

• Project structure

• Documentation map

• The 44 validation rules

• Contributing

• Open source, free and paid

• License

Related MCP server: Revit Converter MCP

What it does

Check and fix models

View, measure and present

Supported IFC versions: IFC2x3 · IFC4 · IFC4x1 · IFC4x3

Maps, reality capture and digital twins

Some of these modules are behind build flags (VITE_FEATURE_GIS, VITE_FEATURE_POINTCLOUD, VITE_FEATURE_MESH, VITE_FEATURE_VIDEO, VITE_FEATURE_SOLAR, VITE_FEATURE_FLOOD, VITE_FEATURE_HAZARD). See docs/DEPLOYMENT.md.

See it in action

Every clip is the real app running in a browser, with no edited footage. The first three and the header's opening use the open Duplex Apartment reference IFC (7,131 elements); the rest use the Barcelona reference models in public/models/. Re-record them with scripts/gif/capture.mjs, scripts/gif/features.mjs and scripts/gif/flood-frames.mjs, then scripts/gif/encode.mjs / scripts/gif/montage.mjs (the header GIF).

Navigate the model and inspect IFC properties

Step through every issue in 3D

After validation, Show in 3D opens a bar that walks the issues one by one, with the elements highlighted on the model.

Export the results

A full JSON report, a CSV for Excel, a signed certificate, BCF, a one-page delivery report or a COBie workbook, all written in the browser.

Sun and climate analysis

One link loads the model, reads the site's real climate (ERA5) and paints the passive sun impact on every facade, hour by hour.

Rain and flooding on the map

The Hotel Vela on Barcelona's real relief, with the city around it: a 2-hour storm runs as a 2D flood simulation on the GPU, then the maximum depth it left.

Point clouds next to the IFC

A construction-progress scan aligned with the IFC it surveys, in the same scene.

A city digital twin from one scene file

?scene= opens eight IFC models in Plaça de Catalunya, Barcelona, on the city map with live open data.

Clip Studio

Generate a presentation from the model (storeys, systems, findings) and edit it into a clip for LinkedIn, Reels or TikTok.

Embed it: iframe, SDK, WordPress

Put the viewer in a blog, a CDE panel, a dashboard or an internal tool. The model is parsed in the visitor's browser, nothing is uploaded.

1. Iframe and URL params

<iframe src="https://www.ifcvieweronline.eu/?model=https://your-cde.com/model.ifc&embed=1"
        width="100%" height="600" style="border:0" allow="fullscreen"></iframe>

model (comma-separated for federated sets), scene, embed, ui (minimal · full · kiosk · client · article), validate, select, isolate, lang and more. Full reference: docs/EMBED_URL_PARAMS.md.

2. JS SDK (v1.18): mount the viewer and stream IFC bytes from your own app, with no public URL and no CORS.

<div id="viewer" style="height:520px"></div>
<script type="module">
  import { IfcViewer } from "https://www.ifcvieweronline.eu/sdk/ifc-viewer.es.js";
  const viewer = new IfcViewer("#viewer");
  const bytes = await fetch("/models/project.ifc").then(r => r.arrayBuffer());
  await viewer.add("project.ifc", bytes);   // parsed client-side
  viewer.on("element-selected", (e) => console.log(e.ifcType, e.expressId));
</script>

A small, dependency-free ES module (iframe + postMessage). It can read stats, issues and validation results, take screenshots, run an IDS check (checkIds(idsXml)), drive scenes, layers and devices, and listen for ready, model-loaded, validation-completed and element-selected. Reference: docs/IFC_VIEWER_SDK.md · live docs at /sdk/.

3. WordPress: a plugin (block + [ifc_viewer] shortcode) to embed one or several models, point clouds, the map, sun studies, a plan cut or a digital twin scene in posts and pages, in integrations/wordpress/.

How it works

The whole pipeline lives in the browser. Every load is a job in one loading queue. IFC files are converted in a Web Worker with WebAssembly, rendered with Three.js, and validated in another worker. Nothing about your model is sent to a server of ours. Map tiles and open-data layers are fetched by the browser straight from each provider, and only after you agree to it.

flowchart TD
    subgraph BROWSER["Your browser: the model never leaves this boundary"]
        UI["React 18 UI<br/>Tailwind · Radix · Zustand"]
        QUEUE["Loading queue<br/>jobs · phases · cancel · retry"]
        VIEWER["Viewer (Three.js)<br/>federation, map, twins"]
        CACHE[("OPFS cache<br/>reloads skip conversion")]

        subgraph WORKERS["Web Workers (WebAssembly)"]
            PARSE["ifc-parser<br/>IFC → fragments"]
            VALID["validator<br/>44 rules + spatial tree"]
            FIX["autofix · export<br/>apply fixes and diffs → IFC"]
            IDS["ids<br/>IDS 1.0 check"]
            MORE["bcf-parser · snapshot · point-cloud<br/>geo-extract · geo-terrain · geo-buildings<br/>basemap-paint · gif-export"]
        end
    end

    FILE["📄 drop .ifc, folders, zip, data"] --> UI
    UI --> QUEUE
    QUEUE <-->|hit / miss| CACHE
    QUEUE --> PARSE
    PARSE -->|fragments| QUEUE
    QUEUE -->|fragments| VIEWER
    UI --> VALID
    VALID -->|streamed issues + Health Score| UI
    UI --> FIX
    FIX -->|corrected .ifc| DL["⬇ download"]

• State: small Zustand stores in src/stores/; geometry never enters a store, only stable IDs do.

• Worker boundaries: every worker message is checked at runtime with Zod schemas (src/lib/worker-schemas.ts).

• Deep dives: ARCHITECTURE.md (data flow), docs/MODEL_LOADING.md (queue, scheduler, cache), DECISIONS.md (why things are the way they are).

Tech stack

Getting started

Requirements: Node.js 20+ and npm.

git clone https://github.com/j03rul4nd/ifc-viewer-online.git
cd ifc-viewer-online
npm install
npm run dev    # → http://localhost:3000

The dev server sends Cross-Origin-Opener-Policy: same-origin and Cross-Origin-Embedder-Policy: require-corp, which multithreaded WASM (SharedArrayBuffer) needs.

The build bundles Three.js and @thatopen/* into worker chunks and needs a lot of memory; the build script already raises the Node heap to 6 GB. You can also self-host with the Dockerfile / docker-compose.yml (nginx). See docs/DEPLOYMENT.md.

Project structure

src/
  components/   # UI: Viewer, Toolbar, ValidationPanel, IdsPanel, BcfPanel, GeoPanel, ScenePanel, …
                #   + measure/ compare/ data/ geo/ pointcloud/ solar/ eir/ requirements/ mobile/ blog/ twin-builder/ …
  workers/      # ifc-parser · validator · autofix · export · ids · bcf-parser · snapshot · point-cloud · geo-* · basemap-paint · gif-export
  stores/       # Zustand stores (model, scene, validation, editor, loading, bcf, ids, geo, measure, …)
  hooks/        # useModelSession, useValidationRunner, useIdsRun, useElementFocus, …
  lib/          # viewer.ts · loader.ts · validator.ts · diffStore.ts · worker-schemas.ts
    loading/    # load queue, scheduler, convert pool, cache, drop plans
    ids/  eir/  autofix/  compare/  certify/  cobie/   # checking, fixing, comparing, reporting
    measure/  route/  plans/                           # measuring, dimensions, takeoff, routes
    geo/  pointcloud/  mesh/  video/  solar/           # map, reality capture, analyses
    twin/  scene/  scene-doc/  layers/  connections/   # digital twins and scene documents
    capture/  director/  cover/  presentation/  tour/  # capture and presentations
  sdk/          # IfcViewer embeddable SDK (built to public/sdk/)
  i18n/ locales/  # i18next config + JSON per locale
  types/        # Zod schemas + TypeScript types (ValidationRules, RULE_COUNT, …)
public/         # static landings, /fix/ and /blog/ pages, demo models, scenes, SDK build
scripts/        # SEO generators, blog i18n, covers, Blender asset builders, SDK docs
cf-worker/      # Cloudflare Worker: share-link SSR and contact forms (never sees the model)
integrations/   # WordPress plugin
test/           # fixtures

Documentation map

Start with these:

The 44 validation rules

Rules run in src/workers/validator.worker.ts, gated by a RulesConfig. The count lives in one place, RULE_COUNT in src/types, and a test fails if any doc quotes a different number. (This is separate from the buildingSMART IDS check, which runs your own .ids file.)

RULE_EMPTY_NAME · RULE_EMPTY_LONGNAME · RULE_DUPLICATE_NAME · RULE_NAMING_CONVENTION · RULE_MISSING_TYPE · RULE_DUPLICATE_GUID · RULE_MISSING_PROPERTY_SET · RULE_ORPHAN_ELEMENT · RULE_WRONG_CONTAINER · RULE_BROKEN_AGGREGATE · RULE_INVALID_GUID_FORMAT · RULE_SPATIAL_HIERARCHY · RULE_CIRCULAR_REFERENCE · RULE_EMPTY_PROPERTY_VALUE · RULE_MISSING_MATERIAL · RULE_ELEMENT_IN_BUILDING · RULE_INVALID_IFC_VERSION · RULE_ELEMENT_CLASH (off by default)

RULE_MISSING_PROJECT · RULE_MISSING_BUILDING · RULE_MISSING_STOREY · RULE_EMPTY_STOREY · RULE_FILE_DESCRIPTION_MISSING · RULE_FILE_AUTHOR_MISSING · RULE_PROJECT_LONGNAME_MISSING · RULE_STOREY_ELEVATION_MISSING · RULE_ISO19650_PROJECT_INFO · RULE_ISO19650_AUTHOR_INFO · RULE_ISO19650_FILENAME

RULE_MISSING_CLASSIFICATION · RULE_LOD_PSET_MISSING · RULE_LOD_QUANTITY_MISSING · RULE_LOD_MATERIAL_LAYER_MISSING · RULE_MEP_SYSTEM_MISSING · RULE_CLASH_MEP_STRUCTURAL · RULE_PROXY_OVERUSE · RULE_COORDINATE_OFFSET · RULE_FILE_SIZE_ANOMALY

RULE_OPENING_WITHOUT_HOST · RULE_STOREY_ELEVATION_DUPLICATE · RULE_STOREY_ELEVATION_ORDER · RULE_UNIT_CONSISTENCY · RULE_SPACE_AREA_MISSING · RULE_CONNECTED_MEP

The Health Score is a logarithmic, diminishing-returns number derived from the weighted severity of all issues (errors such as duplicate GUIDs, warnings such as missing property sets, info such as proxy overuse).

Contributing

New validation rules, translations and bug fixes are especially welcome. Read CONTRIBUTING.md first.

Add a validation rule (src/workers/validator.worker.ts):

1. Add the rule ID to ValidationRules and its metadata in src/types/index.ts

2. Implement the async rule: it receives the IfcAPI instance, modelId and a SpatialIndex helper and returns ValidationIssue[]

3. Wire it into the runAllRules dispatch and set DEFAULT_RULES[RULE_ID]

4. Add i18n strings to RULE_TRANSLATIONS

5. Run npm test: src/lib/rule-count.test.ts lists every page and README that still quotes the old rule count

Add a translation: copy src/locales/en/ to a new locale folder, translate the values, and register it in src/i18n/config.ts.

Before opening a PR: npm test and npx tsc -b.

Open source, free and paid

The rules we follow

1. Everything that is free in the browser today stays free, forever. Nothing is taken away from anyone.

2. What costs a server is paid: storage, server processing, bandwidth, hosted APIs.

3. New professional productivity tools (for example batch work across many files) may launch in a paid plan, even when they run in the browser.

4. The free plan gets nothing that runs on our servers, so it never depends on an account or a quota.

Free, open source (MIT, this repo)

The viewer, the 44-rule validator and Health Score, one-click fixes and fix guides, buildingSMART IDS, EIR profiles, the editor and IFC export, BCF import/export, version compare, measuring and takeoff, sections and floor plans, capture and presentations, the 3D map, point clouds and data layers, solar / flood / slope analyses, digital twins and scene documents, the JS SDK, iframe embedding and the WordPress plugin. All of it runs in your browser, with no account.

Paid plans (planned, not live yet)

Not everything is in this repo. The paid plans are built on private, closed-source code: the cloud backend and API, accounts and billing, storage, server processing and the team workspace. That code lives in private repositories and is not covered by the MIT license. Some paid screens exist here only as hidden UI behind flags; they do nothing without the private backend. This repo is the full free product, not the whole company.

License

The code in this repository is MIT: fork it, self-host it, use it commercially.

Author

Joel Benitez

If this project saved you time, a ⭐ helps other BIM people find it.

Built with @thatopen/components, web-ifc and Three.js.