Think of Wireframes like blueprints - they’re templates that let you customize how Velt components render in your app. They are not functional components. Define them once, and Velt will swap in your custom template wherever a component renders, overriding the default.
When you create a wireframe:
It acts as a global template
Changes apply everywhere that component is used
You can use your own components and HTML structure
Host App’s dynamic variables: Use UI State to inject your app’s dynamic variables into Velt components seamlessly. This is available across all Velt Wireframes.
Host App’s JavaScript: Wrap your component in VeltButtonWireframe. It exposes a callback. Listen for it to trigger your custom JS logic.
Empty wireframes keep Velt’s default styling.
Adding any children to a wireframe template removes most of its default styling. This gives you full control over the layout.
However, you will still need to use a combination of CSS overrides on any remaining styles and your own components to achieve the desired styling.
Custom CSS or frameworks: Gives you full control over the styling of Velt components using your own CSS or frameworks. This requires disabling Shadow DOM. Learn more
Conditional Classes: Apply classes conditionally based available template variables. Learn more