no SDK required · Built for the art world

Add AR & 3D art viewing to any site in minutes

Simple web tools that let buyers see art in their own space before they purchase. No extra software or app needed. Works on Shopify, Webflow, WordPress, and custom HTML.

WORKS WITH

Shopify
Shopify
WordPress
WordPress
WebFlow
Webflow
Squarespace
Squarespace
Wix
Wix
HTML
Custom HTML
Three Components

Everything You Need,
Nothing You Don't

Three purpose-built web components cover every AR and 3D scenario your art platform needs.

<byrst-ar>

AR View

A single HTML tag that renders a "View in Your Room" button. On mobile it launches native AR; on desktop it shows a scannable QR code.
True-to-size AR with physical dimensions
Native Safari (iOS) + Chrome (Android)
QR code fallback for desktop visitors
Wall or floor anchor modes
Fully CSS-customizable button
<byrst-ar
  model="artwork.jpg"
  width="24" height="36"
></byrst-ar>
View in your room
<byrst-scene>

Scene View

Perspective-correct room previews. Load multiple artworks from a JSON file with multi-size options, collectors can compare sizes before buying.
Homography-based perspective placement
Multi-artwork carousel from JSON
Multiple size configurations per piece
Full-screen browser mode
External trigger support
<byrst-scene
src="./artworks.json"
full-screen
api-key="...">
</byrst-scene>
View scene
<byrst-3d-xpress>

3D-Xpress Creator

An interactive model builder your collectors use to crop images and generate AR-ready 3D models on the fly - no pre-processing needed.
Auto 3D generation from JPEG/PNG/WEBP
On-the-fly crop and frame tool
Firesmodel-completeevent with config
No file uploads required
Fully CSS-customizable button
<byrst-3d-xpress
image-url="art.jpg"
width="40"
units="in">
</byrst-3d-xpress>
Create 3D model
Setup in Minutes

From Photos to AR in Three Steps

No backend changes, no dependencies, no app store submissions. If you can paste HTML, you're ready.

1

Get Your API Key

Create a free account at app.byrst.com, navigate to Account → Manage API Keys, and generate a new key in seconds.

app.byrst.com/account/api-keys ACCOUNT Profile API Keys Billing Usage Settings Manage API Keys Production Key byr_••••••••••••••••••3f2a Copy Staging Key byr_••••••••••••••••••8c19 Copy + Generate New Key
2

Add the Global Snippet

Paste one script tag before your closing </body> tag. That's your entire setup cost, one time, site-wide.

<script type="module">
  import "https://cdn.byrst.com/npm/@byrst/web-components/@0.0.4/byrst-web-components.esm.js";
  window.sessionStorage
    .setItem("byrst_api_key", "YOUR_KEY");
</script>
3

Drop In A Component

Add a <byrst-ar> tag wherever an artwork lives. Pass the image URL and physical dimensions, done.

<byrst-ar
  model="https://your-site.com/art.jpg"
  width="24" height="36"
  units="in">
</byrst-ar>

Developer-First

Customize with CSS & Events

Every component is fully themeable via CSS custom properties. Wire up your own buttons using slots or external trigger IDs. Listen to lifecycle events for custom workflows.

CSS

CSS Custom Properties

Control colors, radius, font, padding, icon size, all via standard CSS variables. No JS configuration needed.

API

Slot API

Replace the default button with any HTML element using named slots, your button, your style.

Event

DOM Events

Listen for setup-complete and model-complete events to integrate with your existing product workflows.

Checked Checkbox

External Trigger ID

Wire any existing button to a hidden component using trigger-element-id, no markup restructuring required.

<!-- Option A: CSS Custom Properties -->
<byrst-ar
  model="https://example.com/art.jpg"
  width="40" height="40" units="in"
  btn-text="See it on your wall"
  style="
    --background-color: #C8953A;
    --border-radius: 8px;
    --font-family: 'Montserrat', sans-serif;
    --padding: 12px 24px;">
</byrst-ar>

<!-- Option B: Slot your own button -->
<byrst-ar model="..." width="24" height="36" units="in">
  <button slot="ar-view-btn">View in Room</button>
</byrst-ar>

<!-- Option C: External trigger -->
<button id="my-ar-btn">View in Room</button>
<byrst-ar
  trigger-element-id="my-ar-btn"
  hide-ui
  model="..." width="24" height="36" units="in">
</byrst-ar>
Any Platform

Works Where You Already Build

Drop Byrst components into any platform without framework rewrites or specialist integrations.

Shopify
WordPress
Webflow
Squarespace
Wix
Custom HTML
React / Next.js
Vue / Nuxt
Any CMS

Common Questions

Does my user need to download an app?

No. AR launches natively in Safari (iOS 12+) and Chrome (Android). Desktop users get a QR code to scan with their phone, zero installs, zero friction.

Do I really only need one image?

Just pass a public JPEG, PNG, or WEBP URL to the model attribute. Byrst automatically generates a high-fidelity 3D model, no uploads, no 3D software required.

Is the AR view true to the artwork's physical size?

Yes. You specify the physical dimensions using width, height, and units attributes. The AR experience places the artwork at its real-world scale in the collector's room.

Can I match Byrst to my site's design?

Fully. Use CSS custom properties to control colors, typography, padding, and border radius. Or use the slot API to replace the default button entirely with your own HTML element.

What platforms does Byrst work on?

Any platform that lets you add HTML: Shopify, WordPress, Webflow, Squarespace, Wix, and custom-coded sites. If you can paste a script tag, you can use Byrst.

Where can I get an API key?

Create a free account at app.byrst.com, navigate to Account → Manage API Keys, and generate a key. It takes less than two minutes.

free 14-day trial

Give Your Collectors
the Gallery Experience
at Home

Join galleries, auction houses, and art platforms already using Byrst to turn browsers into buyers. Start your free trial today, no credit card required.