FlowCraft is a powerful drag-and-drop visual editor for OutSystems that allows users to create diagrams, workflows, resumes, UI layouts, mind maps, and custom visual structures dynamically inside applications.

The component is delivered as a Web Block containing a fully interactive canvas editor with support for:

• Drag & Drop Elements
• Resize / Rotate / Scale
• Multi Selection
• Element Connections
• Layers Panel
• Text Editing & Styling
• JSON Import / Export
• PNG Export
• Custom HTML Rendering
• Keyboard Shortcuts

Web Block Usage

Simply drag the FlowCraft web block into your screen.

The component automatically initializes the editor and toolbar.

Input Parameters

1. InitialStateJSON

Type

Text

Description

Used to load a previously saved editor state into the canvas.

Example

{
  "elements": [],
  "connections": []
}

2. CustomeDiv
Type
Text
Description
Allows rendering fully custom HTML blocks directly inside the FlowCraft canvas.
Example
<div class="editable">
    <h2>Resume Title</h2>
    <p>Custom HTML Content</p>
</div>