TipTap — usage examples

TipTap ships as six pre-compiled, per-framework packages from a single .rozie source — install only the one for your framework (no Rozie toolchain, no build-time compile step). Each carries its engine + framework peers as peer dependencies, so you control their versions. The snippets below are the same idiomatic consumption code shown in each package's README; switch the tab to your framework.

Usage

tsx

import { useState } from 'react';
import { TipTap } from '@rozie-ui/tiptap-react';

export function Demo() {
  const [html, setHtml] = useState('<p>Hello <strong>world</strong></p>');
  return <TipTap html={html} onHtmlChange={setHtml} placeholder="Start writing…" />;
}

vue

<script setup lang="ts">
import { ref } from 'vue';
import TipTap from '@rozie-ui/tiptap-vue';

const html = ref('<p>Hello <strong>world</strong></p>');
</script>

<template>
  <TipTap v-model:html="html" placeholder="Start writing…" />
</template>

svelte

<script lang="ts">
  import TipTap from '@rozie-ui/tiptap-svelte';

  let html = $state('<p>Hello <strong>world</strong></p>');
</script>

<TipTap bind:html placeholder="Start writing…" />

import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { TipTap } from '@rozie-ui/tiptap-angular';

@Component({
  selector: 'app-demo',
  standalone: true,
  imports: [TipTap, FormsModule],
  template: `<TipTap [(html)]="html" placeholder="Start writing…" />`,
})
export class DemoComponent {
  html = '<p>Hello <strong>world</strong></p>';
}

tsx

import { createSignal } from 'solid-js';
import { TipTap } from '@rozie-ui/tiptap-solid';

export function Demo() {
  const [html, setHtml] = createSignal('<p>Hello <strong>world</strong></p>');
  return <TipTap html={html()} onHtmlChange={setHtml} placeholder="Start writing…" />;
}

import '@rozie-ui/tiptap-lit';

// <rozie-tip-tap> is a custom element. Bind `html` as a property and listen
// for the two-way `html-change` event.
const el = document.querySelector('rozie-tip-tap');
el.html = '<p>Hello <strong>world</strong></p>';
el.addEventListener('html-change', (e) => console.log(e.detail));

Imperative handle

Beyond props and events, TipTap exposes imperative methods (declared once in the .rozie source via $expose). Grab a handle through your framework's native ref mechanism and call them directly:

tsx

import { useRef } from 'react';
import { TipTap, type TipTapHandle } from '@rozie-ui/tiptap-react';

const editor = useRef<TipTapHandle>(null);
// <TipTap ref={editor} ... />
editor.current?.toggleBold();
const html = editor.current?.getHTML();

vue

<script setup>
import { ref } from 'vue';
const editor = ref();        // template ref
</script>

<template>
  <TipTap ref="editor" />
  <button @click="editor.toggleBold()">Bold</button>
</template>

svelte

<script>
  let editor;                 // component instance via bind:this
</script>

<TipTap bind:this={editor} />
<button onclick={() => editor.toggleBold()}>Bold</button>

@Component({ /* ... */ })
export class DemoComponent {
  @ViewChild(TipTap) editor!: TipTap;  // or the viewChild() signal
  bold() { this.editor.toggleBold(); }
  html() { return this.editor.getHTML(); }
}

tsx

import { TipTap, type TipTapHandle } from '@rozie-ui/tiptap-solid';

let handle: TipTapHandle | undefined;
// The ref callback receives the HANDLE object (not the DOM node).
<TipTap ref={(h) => (handle = h)} />;
handle?.toggleBold();
const html = handle?.getHTML();

// The custom element IS the handle — its exposed methods are public element
// methods.
const el = document.querySelector('rozie-tip-tap');
el.toggleBold();
const html = el.getHTML();

TipTap — usage examples ​

Usage ​

Imperative handle ​

See also ​

TipTap — usage examples

Usage

Imperative handle

See also