Builder Overview

The Parsifly Builder is designed to allow developers to create frontend applications through an intuitive UI interface. This powerful tool provides various resources that facilitate fast web application development.

Export & Extensions

Native JSON Export

Applications can be exported as JSON with the native extension format, providing a standardized way to save and share your projects.

Custom Extensions

New extensions can be developed to export code in other JS frameworks or any web development framework, giving you flexibility in your deployment options.

External Packages

External packages can be installed with compatibility files (similar to @types in TypeScript), allowing you to extend the platform's capabilities.

Editors

The Builder includes three main editors for different aspects of application development:

UI Editor

Create interfaces for your applications using drag-and-drop HTML elements. Native HTML elements are available through the basic package installation.

Key Features:

• Drag-and-drop interface builder
• Native HTML element library
• Visual layout tools
• Real-time preview

Logic Editor

Create application logic using drag-and-drop logic elements. Logic elements consist of various nodes for different operations:

Available Node Types:

• Start - Entry point for logic flows
• End - Termination point for logic flows
• If - Conditional branching
• Switch - Multiple condition branching
• Assign - Variable assignment
• Function - Custom function calls
• ForEach - Loop operations
• Comment - Documentation and notes

Expression Editor

Build expressions to compose conditions in IF statements and other logical operations. Create dynamic content through variable references and function calls.

Sidebars

The Builder includes several specialized sidebars for different aspects of project management:

Resources Sidebar

Manage project resources and assets. View, organize, and access all files and components used in your project.

Toolbox Sidebar

Drag new logic or UI elements to the main editor. Browse available components and tools for building your application.

Inspector Sidebar

Inspect details of logic nodes or UI elements. Configure properties, events, and behaviors for selected components.

Outline Sidebar

View hierarchy of UI elements in the UI Panel. Navigate complex layouts and understand component relationships.

Dependency Sidebar

Manage project dependencies and external resources. Add, remove, and configure packages and libraries.

Extensions Sidebar

Extend platform capabilities with third-party parsers and actions. Browse and install extensions from the marketplace.

Workflow

Typical Development Process

1. Project Setup - Create new project and configure basic settings
2. UI Design - Use UI Editor to create interface layouts
3. Logic Implementation - Add business logic with Logic Editor
4. Integration - Connect UI components with logic functions
5. Testing - Preview and test application functionality
6. Export - Generate final application in desired format

Best Practices

• Start with UI mockups before implementing logic
• Use meaningful names for components and functions
• Organize complex logic into smaller, reusable functions
• Test frequently during development
• Document complex expressions and logic flows

Next: Learn about specific editors in detail:

• UI Editor
• Logic Editor
• Expression Editor