Build your viewer
Here you can easily create a layout and theme configuration for your viewer. Share the resulting configuration with others.
The builder
The viewer loads once the page has.
Where the viewer puts its own chrome around the material.
Viewer behavior and presentation settings.
Which parts of the viewer UI to show or hide.
Hide or show specific toolbar buttons.
hich panels are open on load, which can be closed, and which side they appear on.
Panel and thumbnail gallery sizes.
Renderer performance settings.
The following are the first-party plugins available today.
The brand/state colors and their text colors.
The gallery and the input surface follow the viewer’s by default.
Text and icons. Each region follows the global content color by default.
Set which corners are rounded and how much.
Take it with you
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> The HTML guide covers everything this snippet leaves out.
import { TriiiceratopsViewer } from 'triiiceratops/react';
export function Reader() {
return (
<TriiiceratopsViewer
manifestId="/material/landing/manifest.json"
theme="light"
style={{ display: 'block', height: '600px' }}
/>
);
} The React guide covers everything this snippet leaves out.
<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> The Vue guide covers everything this snippet leaves out.
<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> The Svelte guide covers everything this snippet leaves out.