DOM Studio

UI designer

Vue Typography Editor Component

Beta

Figma-style text controls for real HTML: font, weight, size, line height, letter spacing, style, alignment, case and colour.

Try it

The quick brown fox jumps over the lazy dog.

{ "fontFamily": "Georgia, \"Times New Roman\", serif", "fontWeight": "700", "fontSize": "40px", "lineHeight": "1.1", "letterSpacing": "-0.5px", "color": "#171717", "textAlign": "left", "fontStyle": "normal", "textDecorationLine": "none", "textTransform": "none" }

Use in your application

Bind a typography record. typographyToStyle turns it into a Vue style object; typographyToCssProperties gives kebab-case properties for inline CSS, and typographyFromCss reads them back. The editor copies the record rather than mutating it, and emits change with { typography, style }.

vue
<script setup>
import { computed, ref } from 'vue';
import { DomTypographyEditor, createTypography, typographyToStyle } from '@getdom/studio/vue';
const typography = ref(createTypography({ fontSize: 40, fontWeight: '700' }));
const style = computed(() => typographyToStyle(typography.value));
</script>

<template>
	<DomTypographyEditor v-model="typography" />
	<h1 :style="style">Your HTML</h1>
</template>

The typography record

Keys follow CSS in camelCase: fontFamily, fontWeight, fontSize, lineHeight, letterSpacing, color, textAlign, fontStyle, textDecoration and textTransform. Numbers are pixels for fontSize and letterSpacing, and a multiple of the font size for lineHeight. Any value can also be CSS, such as 1.25rem or 0.02em, and an empty value inherits, which is how the canvas shows text styled by classes. Pass fonts to offer your own families; a family that is not listed still shows, and Custom font accepts any stack.

Edit text on the canvas →Edit poster text →