Changes from Micrio 6.x to 7.0 Client 7.0

This page is about the Micrio client version 7. Use the links below to navigate to alternative versions.

If you are using Micrio out of the box (using it with no custom CSS or JS), upgrading to 7.0 is a drop-in replacement — your existing images, markers, tours, and embeds will continue to work without modifications.

If you have a customised implementation with your own CSS or JavaScript that targets Micrio's internals, the following changes apply.

Should I upgrade?

Each Micrio JavaScript major version has a stable working release:

Version 1.x (2015-2019): Micrio 1.9
Version 2.x (2019-2020): Micrio 2.9
Version 3.x (2020-2021): Micrio 3.3
Version 4.x (2022): Micrio 4.1
Version 5.x (2024): Micrio 5.5.6 (npm)
Version 6.x (2026): Micrio 6.1.14 (npm)
Version 7.x (2026): Micrio 7.1.3 (npm)

This means projects using any of these versions will always keep working as they are. If your current implementation works well, there is no need to upgrade.

What's changed in v7?

1. Svelte has been removed — native Web Components

After the WebAssembly engine was removed in 6.0, the UI layer was still silo'd behind Svelte while the rest of the codebase ran on plain TypeScript. Version 7.0 completes this transition: Svelte is gone, and every piece of the Micrio UI is now a native custom element.

This eliminated ~200 kB of uncompiled code, unified the internal architecture, and makes the rendering and UI logic easier to follow and maintain.

The resulting download numbers reflect this:

	6.1.14 (Svelte 5)	7.0.0 (Web Components)	Change
Lines of code	25,813	21,991	−14.81%
Raw source code	982.7 kB	781.2 kB	−20.50%
Compiled JS	400.3 kB	268.0 kB	−33.05%
Over the wire (compressed)	131.0 kB	90.2 kB	−31.15%

The HTML structure became much cleaner and more logical. The restructured CSS also gained a better overview, which resulted in a better mobile UI/UX and more unified styling across all elements.

2. DOM structure overhaul — classes became elements

Previously, Micrio rendered its UI as <div> elements with micrio- prefixed class names:

html

<!-- v6 / v5 — class-based DOM -->
<div class="micrio-toolbar">…</div>
<div class="micrio-controls">…</div>
<button class="micrio-button zoom-in">…</button>

In v7, every visual component is a proper HTML custom element with the same micrio- prefix:

html

<!-- v7 — custom element-based DOM -->
<micrio-toolbar>…</micrio-toolbar>
<micrio-controls>…</micrio-controls>
<micrio-button class="zoom-in"><button>…</button></micrio-button>

All components live inside a <micrio-main> wrapper which mainly uses display: contents.

3. Google Analytics integration removed

The built-in GoogleTag class and its automatic gtag.js event tracking has been removed. If you were relying on data-gtag or the noGTag setting, these are now no-ops.

You can achieve the same (and more flexible) analytics by listening to Micrio's custom events and forwarding them to your analytics provider yourself:

const micrio = document.querySelector('micr-io');

// Forward specific Micrio events to your analytics
micrio.addEventListener('load', (e) => {
	myAnalytics.track('Micrio Image Loaded', { id: e.detail.id });
});

micrio.addEventListener('marker-opened', (e) => {
	myAnalytics.track('Marker Opened', { title: e.detail.title });
});

micrio.addEventListener('tour-start', (e) => {
	myAnalytics.track('Tour Started', { id: e.detail.id });
});

4. Minor JS API changes

v6 / v5	v7	Impact
`micrio.open(id)` returns `MicrioImage`	`micrio.open(id)` returns `Promise<MicrioImage>` (async)	Await the call or use `.then()`
`micrio.open()` accepts `string \| Partial<ImageInfo>`	accepts `string \| BundleImage`	Rarely affects custom code

5. Consolidated data loading — `bundle.json`

Introduced in a later 6.x release but never documented, bundle.json is now the primary and only data endpoint for the Micrio viewer. It replaces the earlier two-file model (info.json + data.json / data.[lang].json) with a single consolidated response that contains everything the client needs:

// https://viewer.micr.io/{image-id}/bundle.json
{
  "images": [
    {
      "id": "abc1234",
      "info": { /* image metadata, dimensions, tiles */ },
      "data": { /* markers, tours, text — already language-resolved */ },
      "settings": { /* image-specific overrides */ }
    }
  ],
  "organisation": { /* org branding, logo */ },
  "spaces": [{ "id": "…", "data": { /* 360 space data */ } }],
  "album": { /* gallery/album config for multi-image sets */ }
}

Key benefits:

Single request — one HTTP call replaces multiple fetches, reducing load time.
Multi-image — albums, grids, and related images are all returned in a single images array, so switching between them requires no additional network requests.
Language-resolved data — the server delivers data already in the requested language (based on the lang attribute), no separate language fetches needed.
Self-contained — organisation branding, 360 spaces, and album configuration travel with the image data, so the client never needs secondary API calls.

As this is only for internal use, no action is required from your end for this change.

CSS migration guide

Changed selectors

If you wrote custom CSS that targeted Micrio's internal class names, you need to update your selectors to target the new custom elements:

Old selector (v6 / v5)	New selector (v7)	Notes
`.micrio-button`	`micrio-button > :is(button, a)`	The `<button>` / `<a>` is now a child of `<micrio-button>`
`.micrio-button.active`	`micrio-button > :is(button, a).active`	Active state class is on the inner element
`.micrio-icon`	`micrio-icon > svg`	SVG is a child of `<micrio-icon>`
`.micrio-toolbar`	`micrio-toolbar`	Direct element selector
`.micrio-controls`	`micrio-controls`	Direct element selector
`.micrio-minimap`	`micrio-minimap`	Direct element selector
`.micrio-gallery`	`micrio-gallery`	Direct element selector
`.micrio-popup`	`micrio-marker-popup`	Renamed, now a proper element
`.micrio-logo`	`micrio-logo`	Direct element selector
`.micrio-logo-org`	`micrio-logo-org`	Direct element selector
`.micrio-details`	`micrio-details`	Direct element selector
`.micrio-error`	`micrio-error`	Direct element selector
`.micrio-progress`	`micrio-progress-circle`	Renamed, now a proper element
`.micrio-popover`	`micrio-popover`	Direct element selector
`.micrio-tour`	`micrio-tour` or `micrio-serial-tour`	Serial tours are a separate element
`.micrio-media`	`micrio-media`	Direct element selector
`.micrio-subtitles`	`micrio-subtitles`	Direct element selector
`.micrio-button-group`	`micrio-button-group`	Direct element selector
`.micrio-grid`	`micrio-grid`	Direct element selector
`.micrio-fullscreen`	`micrio-fullscreen`	Direct element selector
`.micrio-embed`	`micrio-embed`	Direct element selector
`.micrio-image-embeds`	`micrio-image-embeds`	Direct element selector
`.micrio-zoom-buttons`	`micrio-zoom-buttons`	Direct element selector
`.micrio-dial`	`micrio-dial`	Direct element selector
`.micrio-audio-controller`	`micrio-audio-controller`	Now a custom element
`.micrio-waypoint`	`micrio-waypoint`	Direct element selector
`.micrio-marker-content`	`micrio-marker-content`	Direct element selector
`.micrio-media-controls`	`micrio-media-controls`	Direct element selector
`.micrio-markers-container`	`micrio-markers`	Renamed
`.micrio-marker`	`micrio-marker`	Direct element selector

Example — before and after

Before (v6 / v5):

css

.micrio-button {
	background: red;
}
.micrio-toolbar {
	opacity: 0.5;
}

After (v7):

css

micrio-button > button {
	background: red;
}
micrio-toolbar {
	opacity: 0.5;
}

CSS variables

All existing CSS variables remain unchanged. They are defined on :root / html and apply globally — the same --micrio-* variables you're already using still work:

Variable	Default	Description
`--micrio-color`	`#fff`	Default text color
`--micrio-color-hover`	`#45A4E4`	Hover / active color
`--micrio-border-radius`	`4px`	Border radius for buttons, popups
`--micrio-background`	`rgba(41,41,41,0.75)`	Element background
`--micrio-background-filter`	`blur(8px)`	Glass effect
`--micrio-icon-size`	`18px`	Icon size
`--micrio-text-align`	`left`	Text alignment
`--micrio-line-height`	`1.5em`	Line height
`--micrio-border-margin`	`16px`	Margin from browser edge
`--micrio-button-size`	`48px`	Button size
`--micrio-button-shadow`	`0 4px 8px rgba(0,0,0,.33)`	Button shadow
`--micrio-marker-size`	`16px`	Marker size
`--micrio-marker-text-color`	`#fff`	Marker label text color
`--micrio-marker-text-shadow`	`0px 2px 4px rgba(0,0,0,0.6)`	Marker label shadow
`--micrio-marker-highlight`	`#00d4ee`	Marker highlight color
`--micrio-marker-color`	`#fff`	Marker color
`--micrio-marker-border-radius`	`100%`	Marker shape
`--micrio-marker-border-color`	`rgba(255,255,255,.2)`	Marker border
`--micrio-marker-border-size`	`8px`	Marker border width
`--micrio-marker-icon`	`none`	Custom marker icon
`--micrio-marker-transition`	`background-color 0.25s ease, …`	Marker transition
`--micrio-popup-shadow`	`0 8px 16px rgba(0,0,0,.33)`	Popup shadow
`--micrio-popup-padding`	`16px`	Popup padding
`--micrio-progress-bar-background`	`rgba(255,255,255,.25)`	Progress bar track
`--micrio-progress-bar-height`	`4px`	Progress bar height
`--micrio-waypoint-size`	`120px`	Waypoint size

New variables in v7

Variable	Default	Description
`--micrio-hide`	`none`	Per-element hide transform (set per component)

Attribute-based state selectors

Micrio 7.0 introduces new state attributes on <micr-io> that you can use in your CSS:

css

/* New state attributes — v7 only */
micr-io[data-idle] { … }           /* No user activity for a period */
micr-io[data-zoomed] { … }         /* Camera is zoomed in past the initial view */
micr-io[data-tour-active] { … }    /* A tour is currently playing */

These were not available in v6.

Full element reference

Element	Role
`<micrio-main>`	Root UI container (`display: contents`)
`<micrio-button>`	Icon/text button
`<micrio-icon>`	Inline SVG icon
`<micrio-button-group>`	Grouped button bar
`<micrio-dial>`	Rotary dial / knob control
`<micrio-progress-circle>`	Loading spinner
`<micrio-toolbar>`	Top toolbar
`<micrio-controls>`	Bottom controls bar
`<micrio-minimap>`	Interactive minimap
`<micrio-logo>`	Micrio brand logo
`<micrio-logo-org>`	Organisation logo
`<micrio-details>`	Image info panel
`<micrio-error>`	Error overlay
`<micrio-markers>`	Marker container
`<micrio-marker>`	Individual marker
`<micrio-marker-popup>`	Marker popup
`<micrio-marker-content>`	Marker content area
`<micrio-popover>`	Custom page popover
`<micrio-menu>`	Navigation menu
`<micrio-tour>`	Video / marker tour UI
`<micrio-serial-tour>`	Multi-image serial tour UI
`<micrio-waypoint>`	Tour waypoint indicator
`<micrio-media>`	Video / 360 video player
`<micrio-media-controls>`	Media player controls
`<micrio-subtitles>`	VTT subtitle overlay
`<micrio-audio-controller>`	Positional audio controller
`<micrio-gallery>`	Swipe / switch gallery UI
`<micrio-grid>`	CSS grid layout container
`<micrio-image-embeds>`	Embedded image containers
`<micrio-embed>`	Individual embedded image
`<micrio-fullscreen>`	Fullscreen toggle
`<micrio-zoom-buttons>`	Zoom in/out buttons

How to update

Via npm (recommended for project builds)

bash

npm install @micrio/client@latest

Then import it in your project:

import type { HTMLMicrioElement } from '@micrio/client';

const micrio = document.querySelector('micr-io') as HTMLMicrioElement;
micrio.camera.flyToView([.2,.2,.3,.3]);

If you are already using @micrio/client from npm:

bash

npm update @micrio/client

Via CDN (direct HTML `<script>` include)

Replace your Micrio JS reference with the latest version:

https://r2.micr.io/micrio-7.1.3.min.js

If your project uses TypeScript declarations:

https://r2.micr.io/micrio-7.1.3.min.d.ts

What stayed the same

The Micrio data model (markers, tours, embeds, settings) did not change. All images published in the dashboard work across v5, v6, and v7.
The main JS API (open(), close(), $current, camera, state, addEventListener) is still the same — only minor internal renames as noted above.
CSS variables (--micrio-*) are fully backwards compatible.
The <micr-io> element tag — your existing HTML <micr-io id="…"> markup needs no changes.

Project explorer

Upload formats and tips

Group settings & users

Project types

Content editor

Content

Markers

Tours

Custom menus

Image settings

Embedding Micrio

JavaScript API

Using your own cloud hosting

Changes from Micrio 6.x to 7.0 Client 7.0

Should I upgrade?

What's changed in v7?

1. Svelte has been removed — native Web Components

2. DOM structure overhaul — classes became elements

3. Google Analytics integration removed

4. Minor JS API changes

5. Consolidated data loading — `bundle.json`

CSS migration guide

Changed selectors

Example — before and after

CSS variables

New variables in v7

Attribute-based state selectors

Full element reference

How to update

Via npm (recommended for project builds)

Via CDN (direct HTML `<script>` include)

What stayed the same

Upload formats and tips

Group settings & users

Content

Markers

Tours

Custom menus

Image settings

Changes from Micrio 6.x to 7.0 Client 7.0 ​

Should I upgrade? ​

What's changed in v7? ​

1. Svelte has been removed — native Web Components ​

2. DOM structure overhaul — classes became elements ​

3. Google Analytics integration removed ​

4. Minor JS API changes ​

5. Consolidated data loading — bundle.json ​

CSS migration guide ​

Changed selectors ​

Example — before and after ​

CSS variables ​

New variables in v7 ​

Attribute-based state selectors ​

Full element reference ​

How to update ​

Via npm (recommended for project builds) ​

Via CDN (direct HTML <script> include) ​

What stayed the same ​

Changes from Micrio 6.x to 7.0 Client 7.0

Should I upgrade?

What's changed in v7?

1. Svelte has been removed — native Web Components

2. DOM structure overhaul — classes became elements

3. Google Analytics integration removed

4. Minor JS API changes

5. Consolidated data loading — `bundle.json`

CSS migration guide

Changed selectors

Example — before and after

CSS variables

New variables in v7

Attribute-based state selectors

Full element reference

How to update

Via npm (recommended for project builds)

Via CDN (direct HTML `<script>` include)

What stayed the same