WebRAD · Visual web development

Free and open source

Visual IDE.
Your application.

Build web applications with a drag and drop IDE. Design responsive interfaces, connect components, and write events in TypeScript. From design to code, with integrated Preview.

Download WebRAD for free Explore the IDE

Windows, Linux, and macOS MIT license

Source on GitHub Star on GitHub

WebRADmy-project.wrproj

Builder ⋯

Search elements…

ELEMENTS

PageHome

Label1

Button1

COMPONENTS

Label

Button ⠿

Edit

Panel

Drag onto the canvas

PageHome 900 × 640

studio.Your next project

FROM THE IDE TO THE BROWSER

Create something
extraordinary.

Bring your idea to life.

Drop your component here

Made with WebRAD

Inspector ⋯

Button1WebButton

VisualInteraction

CONTENT

CaptionGet started

POSITION

X32

Y266

SIZE

W256

H48

APPEARANCE

Background #007ACC

Radius8 px

EVENTS

OnClickButton1Click

OnDblClick—

OnMouseEnter—

OnMouseLeave—

Double-click to create
the event method.

Event linked

Get started

Button1256 × 48

Button +

TS PageHome.ts ×

1
2
3
4
5
6
7
8
9
10
11
12

import type { WebButton } from '@webrad/runtime';

export class PageHome {
  public async Button1Click(
    sender: WebButton,
    event: Event,
  ): Promise<void> {
    Label1.text = "Let’s build something amazing!";
    sender.caption = "Start again";
  }
}

abc text string

ƒ focus method

Text displayed by the Label.

Button1.OnClick → PageHome.Button1Click

TypeScriptButton1 · OnClickUTF-8 WebRAD

Drag

A Button is dragged, aligned, and resized on the canvas. In Interaction, the OnClick event opens the Button1Click method. TypeScript changes the Label1 text and the button caption, with the result demonstrated in Preview.

From idea to delivery, faster

Visual DesignerTypeScriptWebRestGo

FROM CANVAS TO BROWSER

Design the experience.
Code the possibilities.

WebRAD combines the freedom of a visual editor with the control of code. Arrange your interface, configure properties, and write the events that bring it to life.

Explore the Designer

01 / DESIGN

Build your page

Drag components onto the canvas and adjust their appearance in the Inspector.

02 / CODE

Add behavior

Write TypeScript events with types and autocomplete in the editor.

03 / PREVIEW

See your application run

Compile with F9 and test the result in the IDE’s Preview.

A WORKSPACE FOR CREATING

Design and logic.
In the same project.

Pages, components, styles, and events organized in one integrated development experience.

WebRADMy application

Builder +

Search elements…

ELEMENTS

PageDashboard

Container

LabelTitle

Cards

ButtonAction

COMPONENTS

LabelButtonInputContainer

workspaceOverview AC

YOUR BUSINESS, IN ONE PLACE

Welcome, Alex.

Watch your ideas take shape.

Projects12active

Your team08people

ACJLMR+5

Next delivery24October

My web applicationDesign, code, and possibilities.

Open project

Inspector

LabelTitle

VisualInteraction

CONTENT

TextWelcome, Alex.

APPEARANCE

Font size28 px

Weight600

Color #172B45

LAYOUT

WidthAuto

HeightAuto

DESIGN · CODE · PREVIEWIllustration of an application in the Designer

One selection, everywhere

The element tree, canvas, and Inspector work together to keep you in context.

Appearance and interaction

Adjust appearance and layout, then configure each component’s events.

View across screen sizes

Check your page at Desktop, Tablet, and Mobile widths with Responsive mode.

YOUR TOOLS, TOGETHER

Less context switching.
More building.

A workflow that follows your application from its first page to the build.

Drag and drop Designer

Build web interfaces by dragging components onto the canvas. Arrange elements and adjust their properties in the Inspector.

Start with the design.

Integrated TypeScript

Edit your application’s behavior with types, autocomplete, and events.

Control your logic.

Interactive Preview

Compile and interact with your application in Preview. Follow diagnostics in Output.

One key: F9.

Reusable components

Organize pages and components in Project Explorer and share styles across your project.

Create once. Reuse.

Responsive views

Switch canvas widths and adjust zoom to work on interface details.

Desktop, Tablet, and Mobile.

Applications for the web

The result runs on browser technologies. A desktop IDE for building web applications.

From your computer to the web.

INTERFACE AND BACKEND, CONNECTED

WebRAD + RestGo

Your frontend.
Your data.

Connect your application to your RestGo instance with the built-in integration. Access authentication, sessions, Storage, and APIs in TypeScript events.

Login and sessions shared across pages
Authentication events in the interface
Calls to APIs published in RestGo

Explore RestGo

PageLogin · TypeScriptTS

// Your event. Your logic.
const login = await RestGO.login(
  email,
  password
);

if (login.sucess) {
  Navigate('PageDashboard');
}

Built-in SDKTypes + autocomplete

YOUR NEXT PROJECT STARTS HERE

Your idea. On your system.

Get the free, open source visual IDE for Windows, Linux, and macOS.

Explore downloads

BEFORE YOU START

A visual IDE for
web development.

Learn about the drag and drop workflow, TypeScript, and how WebRAD fits your development needs.

What is WebRAD?

A visual RAD IDE for building web applications with pages, components, properties, and TypeScript events, with integrated compilation and Preview. RAD stands for rapid application development: the Designer connects interface design to the code that defines its behavior.

Do I need to know how to code?

The Designer makes it easier to build interfaces visually. To add behavior and business rules, you write events in TypeScript.

Is WebRAD open source?

Yes. WebRAD is free and open source under the MIT license. You can explore the code, contribute, and star it on GitHub.

Which systems are supported?

WebRAD is a desktop application for Windows x64 and ARM64, Linux x64 and ARM64 (.deb and .rpm packages), and macOS on Intel or Apple Silicon. Use it to create and test projects. Generated web applications need to be served over HTTP or HTTPS.

Does WebRAD work without RestGo?

Yes. The Designer, code editor, and Preview are part of the IDE. The optional RestGo integration connects your application to your instance’s resources.

I’m looking for an IDE like VS Code or Antigravity. Why explore WebRAD?

If you are considering VS Code (Visual Studio Code) or Antigravity for web development, explore WebRAD’s workflow too: build pages with drag and drop, adjust properties in the Inspector, and write TypeScript events in the same project. Choose an IDE based on the application and workflow you need.

How do I build web interfaces with drag and drop?

In WebRAD’s Designer, drag components onto the canvas, organize the page in the element tree, and configure appearance and layout in the Inspector. Add TypeScript logic and use F9 to compile and test in Preview.

Can I build responsive interfaces?

Yes. Responsive mode lets you check your interface at Desktop, Tablet, and Mobile widths. Adjust component properties and test your application in Preview as you develop.

Can WebRAD build PWAs?

Yes. Enable installation in Project Settings → PWA and metadata and export Web/PWA. The build generates installation files and, with offline mode enabled, a service worker. Publish over HTTPS; APIs and remote services still require a connection. Learn how to publish.

Do download links follow updates?

Yes. Download links look up the latest release on GitHub. If the lookup is unavailable, you will be redirected to the releases page to choose a file.

Visual IDE.Your application.

Design the experience.Code the possibilities.