Build AI Low-Code Platform — Part 3

This Angular project is part of the Foblex Flow Tutorial Series, which shows how to build powerful visual editors and low-code tools using Foblex Flow — a lightweight and modular open-source library for building node-based interfaces in Angular.

📘 Building AI Low-Code Platform in Angular — Part 3: Creating Custom Nodes and a Node Palette

In this part, we build custom Angular components for each node, add a draggable palette using fExternalItem, and handle dynamic node creation and connection logic using fCreateNode and fCreateConnection.

🧠 Read the article:
Building AI Low-Code Platform in Angular — Part 3: Creating Custom Nodes and a Node Palette

---

🚀 Getting Started

To run the local development server:

ng serve

Navigate to http://localhost:4200 in your browser. The app will automatically reload if you change any source files.

---

⚙️ Building

To compile the project for production:

ng build

The build output will be stored in the dist/ directory.

---

🧪 Testing

Unit tests

ng test

End-to-end tests

ng e2e

Note: End-to-end testing requires a configured runner (e.g. Cypress or Protractor).

---

📦 About Foblex Flow

Foblex Flow is a visual node-based UI framework for Angular, ideal for building IDEs, automation tools, low-code platforms, and more.

• 🔗 GitHub: github.com/foblex/f-flow
• 🌐 Documentation & Live Examples: flow.foblex.com