Build your viewer
Create a layout and theme configuration for the viewer, then export or share it.
Builder
Loading viewer…
How canvases are laid out and read.
How zooming feels and how far it goes.
Buttons that open the gallery, a panel or a plugin are set in that tab. Side and anchor apply only to a separate toolbar.
The thumbnail strip.
Side panels: their toolbar buttons, which are open on load, which can be closed, and which side they appear on.
First-party plugins.
The brand/state colors and their text colors.
Gallery and input surfaces use the viewer surface by default.
Text and icon colors. Each region uses the global content color by default.
Set which corners are rounded and how much.
Export
The code blocks below show the current configuration you've set above. You can copy them to use in your own project.
Portable Viewer Configuration
{} Custom Theme
{} Share Link
Send this link for someone else to view your configuration or bookmark it for later editing.
Complete Embeddable Code
The complete code snippet you can embed in your project, including the configuration, theme, and any plugins you've enabled.
<script src="https://unpkg.com/triiiceratops/dist/triiiceratops-element.iife.js"></script>
<triiiceratops-viewer
manifest-id="/material/landing/manifest.json"
theme="light"
style="display: block; width: 100%; height: 100vh;"
></triiiceratops-viewer> Full setup: HTML guide.
import { TriiiceratopsViewer } from 'triiiceratops/react';
export function Reader() {
return (
<TriiiceratopsViewer
manifestId="/material/landing/manifest.json"
theme="light"
style={{ display: 'block', height: '600px' }}
/>
);
} Full setup: React guide.
<script setup lang="ts">
import { TriiiceratopsViewer } from 'triiiceratops/vue';
</script>
<template>
<TriiiceratopsViewer
manifest-id="/material/landing/manifest.json"
theme="light"
style="display: block; height: 600px"
/>
</template> Full setup: Vue guide.
<script lang="ts">
import { TriiiceratopsViewer } from 'triiiceratops/svelte';
// The design tokens and themes, imported once anywhere in your app.
import 'triiiceratops/style.css';
</script>
<!-- The container sets the height; the viewer fills it. -->
<div style="height: 600px;">
<TriiiceratopsViewer
manifestId="/material/landing/manifest.json"
theme="light"
/>
</div> Full setup: Svelte guide.