WebRAD · Desenvolvimento web visual

IDE visual.
Sua aplicação.

Crie aplicações web com uma IDE de arrastar e soltar. Desenhe interfaces responsivas, conecte componentes e programe eventos em TypeScript. Do visual ao código, com Preview integrado.

Baixar o WebRAD Conheça a IDE

Aplicativo desktop para Windows

WebRADmeu-projeto.wrproj

PageHomeDesignCode Preview

BUILDERPageHomeContainerLabelButton

COMPONENTSLabel Button Input

studio.Seu próximo projeto

DA IDE PARA O NAVEGADOR

Crie algo
extraordinário.

Uma ideia merece sair do papel.

Começar agora

DesignLabel1100%

CONSTRUA VISUALMENTEDesign + código

VEJA FUNCIONARPreview integrado

Menos distância entre ideia e entrega

Designer visualTypeScriptWebRestGo

DO CANVAS AO NAVEGADOR

Desenhe a experiência.
Programe as possibilidades.

O WebRAD reúne a liberdade de um editor visual com o controle do código. Organize sua interface, configure propriedades e escreva os eventos que fazem tudo acontecer.

Explore o Designer

01 / DESIGN

Monte sua página

Arraste componentes para o canvas e ajuste o visual no Inspector.

02 / CODE

Adicione comportamento

Escreva eventos TypeScript com tipos e autocompletar no editor.

03 / PREVIEW

Veja sua aplicação rodar

Compile com F9 e teste o resultado no Preview da própria IDE.

UM WORKSPACE PARA CRIAR

O visual e a lógica.
No mesmo projeto.

Páginas, componentes, estilos e eventos organizados em uma experiência de desenvolvimento integrada.

WebRADMinha aplicação

Builder +

Buscar elementos…

ELEMENTS

PageDashboard

Container

LabelTitle

Cards

ButtonAction

COMPONENTS

LabelButtonInputContainer

workspaceVisão geral AC

SEU NEGÓCIO, EM UM SÓ LUGAR

Bem-vindo, Alex.

Acompanhe suas ideias ganhando forma.

Projetos12ativos

Sua equipe08pessoas

ACJLMR+5

Próxima entrega24outubro

Minha aplicação webDesign, código e possibilidades.

Abrir projeto

Inspector

LabelTitle

VisualInteraction

CONTENT

TextBem-vindo, Alex.

APPEARANCE

Font size28 px

Weight600

Color #172B45

LAYOUT

WidthAuto

HeightAuto

DESIGN · CODE · PREVIEWIlustração de uma aplicação no Designer

Uma seleção, em todo lugar

Árvore de elementos, canvas e Inspector trabalham juntos para manter você no contexto.

Visual e interação

Ajuste aparência e layout, depois configure os eventos de cada componente.

Veja em diferentes telas

Confira sua página nas larguras Desktop, Tablet e Mobile com o modo Responsive.

AS FERRAMENTAS, JUNTAS

Menos troca de contexto.
Mais construção.

Um fluxo de trabalho que acompanha a aplicação, da primeira página ao build.

Designer de arrastar e soltar

Construa interfaces web arrastando componentes para o canvas. Organize os elementos e ajuste suas propriedades no Inspector.

O ponto de partida é visual.

TypeScript integrado

Edite o comportamento da aplicação com tipos, autocompletar e eventos.

Controle sobre a lógica.

Preview de verdade

Compile e interaja com a aplicação no Preview. Acompanhe os diagnósticos no Output.

Uma tecla: F9.

Componentes reutilizáveis

Organize páginas e componentes no Project Explorer e compartilhe estilos no projeto.

Crie uma vez. Reutilize.

Visualização responsiva

Alterne as larguras do canvas e ajuste o zoom para trabalhar nos detalhes da interface.

Desktop, Tablet e Mobile.

Aplicações para a web

O resultado roda com tecnologias do navegador. A IDE é desktop; sua aplicação é web.

Do seu computador para a web.

INTERFACE E BACKEND, CONECTADOS

WebRAD + RestGo

Seu frontend.
Seus dados.

Conecte sua aplicação à sua instância do RestGo com a integração nativa. Autenticação, sessão, Storage e APIs disponíveis nos eventos TypeScript.

Login e sessão compartilhada entre páginas
Eventos de autenticação na interface
Chamadas às APIs publicadas no RestGo

Conheça o RestGo

PageLogin · TypeScriptTS

// Seu evento. Sua lógica.
const login = await RestGO.login(
  email,
  senha
);

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

SDK nativoTipos + autocompletar

COMECE PELO SEU PRÓXIMO PROJETO

Da ideia à tela.
Com WebRAD.

Um ambiente para desenhar, programar e testar aplicações web. Instale no Windows e comece a construir.

WebRAD para Windows

IDE visual para aplicações web

Download em breve

O instalador estará disponível aqui em breve.

ANTES DE COMEÇAR

Uma IDE visual para
desenvolvimento web.

Entenda o fluxo de arrastar e soltar, o uso de TypeScript e como o WebRAD entra na escolha da sua IDE.

O que é o WebRAD?

Uma IDE visual RAD para criar aplicações web com páginas, componentes, propriedades e eventos TypeScript, com compilação e Preview integrados. RAD significa desenvolvimento rápido de aplicações: o Designer aproxima a construção da interface do código que define seu comportamento.

Preciso saber programar?

O Designer facilita a construção visual da interface. Para adicionar comportamentos e regras à aplicação, você escreve eventos em TypeScript.

O WebRAD funciona sem o RestGo?

Sim. O Designer, o código e o Preview fazem parte da IDE. A integração com RestGo é opcional e conecta a aplicação aos recursos da sua instância.

O que é instalado no Windows?

O aplicativo desktop do WebRAD, onde você cria e testa seus projetos. As aplicações geradas são web e precisam ser servidas por HTTP ou HTTPS.

Procuro uma IDE como VS Code ou Antigravity. Por que conhecer o WebRAD?

Se você está pesquisando VS Code (Visual Studio Code) ou Antigravity para desenvolvimento web, conheça também o fluxo do WebRAD: montar páginas com arrastar e soltar, ajustar propriedades no Inspector e escrever eventos TypeScript no mesmo projeto. Avalie a IDE pelo tipo de aplicação e pelo fluxo de trabalho que você precisa.

Como criar interfaces web com arrastar e soltar?

No Designer do WebRAD, arraste componentes para o canvas, organize a página na árvore de elementos e configure aparência e layout no Inspector. Adicione a lógica em TypeScript e use F9 para compilar e testar no Preview.

Posso desenvolver interfaces responsivas?

Sim. O modo Responsive permite conferir a interface nas larguras Desktop, Tablet e Mobile. Você pode ajustar as propriedades dos componentes e testar a aplicação no Preview durante o desenvolvimento.

Desenvolvimento web e PWA são a mesma coisa?

PWA (Progressive Web App) é uma aplicação web preparada para recursos como instalação e, quando implementado, uso offline. O WebRAD oferece criação de interfaces web; transformar uma aplicação em PWA exige verificar e configurar manifest, HTTPS e os recursos de service worker necessários ao projeto. Uma interface responsiva, sozinha, não garante esses recursos.

IDE visual.Sua aplicação.

Desenhe a experiência.Programe as possibilidades.