Quick Start

Get up and running with Parsifly in minutes. This guide will walk you through creating your first application using the visual builder.

Prerequisites

Before getting started, make sure you have:

• ✅ Basic understanding of web development concepts
• ✅ Familiarity with HTML and CSS (helpful but not required)
• ✅ Modern web browser (Chrome, Firefox, Safari, or Edge)

Step-by-Step Guide

1. Create Your First Project

Start by creating a new project in Parsifly:

1. Choose "Application" as the project type
2. Select "SPA" (Single Page Application) as the kind
3. Give your project a name

2. Design Your UI

Open the UI Editor and start building your interface:

1. Drag HTML elements from the Toolbox sidebar
2. Add buttons, inputs, text elements, and other components
3. Arrange them to create your desired layout
4. Use the Inspector sidebar to customize properties

Available Elements:

• Buttons and form controls
• Text and headings
• Layout containers
• Navigation components

3. Add Logic

Switch to the Logic Editor to implement functionality:

1. Create functions using visual nodes
2. Connect nodes to create workflows
3. Use available node types for different operations

Available Nodes:

4. Connect UI and Logic

Link your interface with functionality:

1. Select UI components in the UI Editor
2. Use the Inspector sidebar to set up event handlers
3. Connect component events to your functions
4. Configure data bindings for dynamic content

5. Test and Export

Preview and export your application:

1. Use the preview functionality to test your app
2. Debug any issues using the development tools
3. Export as JSON or use extensions for other formats

Next Steps

Explore Advanced Features

• Learn about expressions and advanced logic nodes
• Discover complex UI patterns and layouts
• Master the extension system

Install Extensions

• Browse available extensions in the marketplace
• Install custom parsers for different export formats
• Add new actions and components

Pro Tips

💡 Helpful hints for a better experience:

• Use the Outline sidebar to navigate complex UI hierarchies
• Save frequently used components as packages for reuse
• Leverage expressions for dynamic content and data manipulation
• Explore the Extensions sidebar to discover new capabilities
• Use the Inspector sidebar to fine-tune component properties

Ready to dive deeper? Check out the Builder Overview to learn about all available tools and features.