Setup Wireframes

New to wireframes? Start with the Wireframes Overview for the model, the interactivity rule, and scoping. This page is the setup walkthrough.

Empty wireframes keep Velt’s default styling. Adding any children to a wireframe template removes most of its default styling, giving you full control over the layout. You will still need CSS overrides on any remaining styles plus your own classes to reach the desired look.

Step-by-Step Setup

Add the root Wireframe Container

React / Next.js
Other Frameworks

import { VeltWireframe, VeltProvider } from '@veltdev/react'

<VeltProvider>
    <VeltWireframe>
        {/* Your customization templates */}
    </VeltWireframe>
</VeltProvider>

<!-- Add style="display:none;" to prevent flash before SDK init -->
<velt-wireframe style="display:none;">
    <!-- Your customization templates -->
</velt-wireframe>

Add Component Wireframes

Copy the wireframe template of the component you want to customize. You can find the wireframe templates in the component’s UI Customization documentation.

React / Next.js
Other Frameworks

<VeltWireframe>
    {/* Example: Customizing Comment Dialog Header */}
    <VeltCommentDialogWireframe.Header>
        <div className="flex items-center gap-2">
            <VeltCommentDialogWireframe.Status />
            <VeltCommentDialogWireframe.Priority />
            <div className="flex-grow" />
            <VeltCommentDialogWireframe.Options />
            <VeltCommentDialogWireframe.ResolveButton />
        </div>
    </VeltCommentDialogWireframe.Header>
</VeltWireframe>

<velt-wireframe style="display:none;">
    <!-- Example: Customizing Comment Dialog Header -->
    <velt-comment-dialog-header-wireframe>
        <div class="flex items-center gap-2">
            <velt-comment-dialog-status-wireframe></velt-comment-dialog-status-wireframe>
            <velt-comment-dialog-priority-wireframe></velt-comment-dialog-priority-wireframe>
            <div class="flex-grow"></div>
            <velt-comment-dialog-options-wireframe></velt-comment-dialog-options-wireframe>
            <velt-comment-dialog-resolve-button-wireframe></velt-comment-dialog-resolve-button-wireframe>
        </div>
    </velt-comment-dialog-header-wireframe>
</velt-wireframe>

Customize the Template

You can customize using the options like:

Layout Customization: Replace, remove, reorder parts, and create variants
CSS: Apply custom CSS and themes
Template Variables: Add dynamic content to your templates
Conditional Templates: Add conditional rendering logic
Action Components: Add custom interactivity

Example:

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltCommentDialogWireframe.Header>
        <div>
            Custom HTML
        </div>
        <VeltCommentDialogWireframe.Status />
        <VeltCommentDialogWireframe.Priority />
        <VeltCommentDialogWireframe.Options />
        <VeltCommentDialogWireframe.CopyLink />
        <VeltCommentDialogWireframe.ResolveButton />
    </VeltCommentDialogWireframe.Header>
</VeltWireframe>

<velt-wireframe style="display:none;">
    <velt-comment-dialog-header-wireframe>
        <div>
            Custom HTML
        </div>
        <velt-comment-dialog-status-wireframe></velt-comment-dialog-status-wireframe>
        <velt-comment-dialog-priority-wireframe></velt-comment-dialog-priority-wireframe>
        <velt-comment-dialog-options-wireframe></velt-comment-dialog-options-wireframe>
        <velt-comment-dialog-copy-link-wireframe></velt-comment-dialog-copy-link-wireframe>
        <velt-comment-dialog-resolve-button-wireframe></velt-comment-dialog-resolve-button-wireframe>
    </velt-comment-dialog-header-wireframe>
</velt-wireframe>

Add the Feature Components

After defining templates, use the actual feature components in your app as normal.
The wireframe components are not meant to be rendered directly in your application. They merely serve as template definitions.

React / Next.js
Other Frameworks

function MyApp() {
  return (
    <div className="my-app">
      <VeltComments /> {/* Will use your custom template */}
    </div>
  )
}

<div class="my-app">
  <velt-comments></velt-comments> <!-- Will use your custom template -->
</div>

Concepts

Approaches

Recipes & Troubleshooting

Components: Async Collaboration

Components: Realtime Collaboration

Reference

Setup Wireframes

Step-by-Step Setup

​Step-by-Step Setup

Step-by-Step Setup