Introduction

polycss renders textured 3D meshes in the DOM. No WebGL, no canvas-as-scene — the rendered output is a tree of standard DOM elements (atlas-backed <i> sprites for both textured and flat-color faces) positioned with transform: matrix3d(...). Each polygon is one DOM node you can target with CSS, attach event handlers to, and inspect in DevTools.

Internally, polycss uses an off-DOM canvas to pack textured and flat-color polygons into atlas pages once at mount; each polygon then references its atlas region with CSS background positioning. So the user-visible runtime tree is plain DOM, with one-time atlas generation at load.

Framework Support

polycss is vanilla-first. The default entry point is custom elements (<poly-scene>, <poly-mesh>, <poly-polygon>) plus an imperative createPolyScene API — no framework required. First-class bindings for React and Vue ship as separate packages on top of the same engine. Pick whatever fits your stack.

Installation

Vanilla JS

npm install polycss

React

npm install @polycss/react

Vue

npm install @polycss/vue

CDN (custom elements)

You can also load polycss directly from a CDN with no build step:

<script type="module" src="https://esm.sh/polycss/elements"></script>

A quick taste

Load a GLB mesh into an interactive scene with zero JS — just custom elements:

<script type="module" src="https://esm.sh/polycss/elements"></script>

<poly-scene rot-x="65" rot-y="45" perspective="1000">
  <poly-mesh src="/cottage.glb"></poly-mesh>
</poly-scene>

Or with React:

import { PolyScene, PolyMesh } from "@polycss/react";

export function App() {
  return (
    <PolyScene>
      <PolyMesh src="/cottage.glb" />
    </PolyScene>
  );
}

Continue to Quickstart → for the full walkthrough with Vanilla JS, React, and Vue versions.

Related

• Quickstart — Full install + first scene walkthrough.
• Core Concepts — The mental model: PolyScene, PolyMesh, Poly, polygon data, pipeline.
• PolyCamera — Camera component reference.
• PolyScene — Scene component reference.