Docs · Guides
Widget playground
Build your widget here, then copy its code. Every change shows at once, and the address keeps it, so you can share the link.
Change anything: the widget and the code follow.
typomat-status: nothing to report
The code for this widget
<script src="https://engine.typomat.app/typomat/widget.js" async></script>
<typomat-preview
variant="full"
show-request
text="Acme Studio"
parameters='{"weight":120,"contrast":0.4,"serif":0.6}'
name="Acme Display">
</typomat-preview>import Script from "next/script";
export function FontPreview() {
return (
<>
<Script src="https://engine.typomat.app/typomat/widget.js" />
<typomat-preview
variant="full"
show-request
text="Acme Studio"
parameters={JSON.stringify({ weight: 120, contrast: 0.4, serif: 0.6 })}
name="Acme Display"
/>
</>
);
}<!-- index.html: <script src="https://engine.typomat.app/typomat/widget.js" async></script> -->
<!-- vite.config.js: vue({ template: { compilerOptions: { isCustomElement: (tag) => tag === "typomat-preview" } } }) -->
<template>
<typomat-preview
variant="full"
show-request
text="Acme Studio"
:parameters="JSON.stringify({ weight: 120, contrast: 0.4, serif: 0.6 })"
name="Acme Display"
/>
</template>