WebRADDocumentationExplore WebRAD ↗WEBRAD / TECHNICAL REFERENCE
IDE and project structure
Panels
| Area | Purpose |
|---|---|
| Project Explorer | Open, create, duplicate, and delete pages, reusable components, Models, Units, and assets; filter items with search. |
| Project | Open Styles and Project Settings. |
| Tool Palette | Add components and place reusable components. |
| Designer | Build the interface and arrange components. |
| Object Inspector | Change properties and link events in Interaction. |
| Code | Edit TypeScript with suggestions, types, and diagnostics. |
| Preview | Run the compiled application. |
| Output and Problems | View messages and compilation errors. |
| Debugger | Inspect execution and values while debugging. |
Project resources
| Resource | Contents |
|---|---|
| .wrproj file | Settings and references to project documents. |
| Pages | Visual model and TypeScript for each page. index is the entry page; 404 handles unknown routes. |
| Reusable Components | Interface and code shared across placements; each instance maintains its own state. |
| Models | TypeScript types and models in models/. |
| Units | Shared functions and classes in units/. |
| Assets | Images and other imported files. |
| Styles | Project styles, visual states, and colors. |
Edit the authored TypeScript. Files with .generated in their names are maintained by the IDE. Preserve the entire project folder when copying it or adding it to version control.
Project → Add Reusable Component offers Blank component and Responsive menu. The menu template creates an editable definition that can be used across pages.
Menus
| Menu | Commands |
|---|---|
| File | New Project, Open Project…, Close Project, Save, Save All, and Exit. |
| Edit | Undo, Redo, Cut, Copy, Paste, and Delete, depending on the focused editor. |
| Search | Find. |
| View | Designer, Code, Preview, Project Explorer, Object Inspector, Tool Palette, Output, Debugger, and developer tools. |
| Project | Add Page, Add Reusable Component, Add Model, Add Unit, Import Asset…, Packages, and Build Application…. |
| Run | Run and debugging controls. |
| Tools | Toggle Theme for the IDE’s appearance. |
| Help | Documentation, Check for Updates..., and About WebRAD. |
Keyboard shortcuts
| Action | Shortcut |
|---|---|
| New project / open project | Ctrl+N / Ctrl+O |
| Save / save all | Ctrl+S / Ctrl+Shift+S |
| Undo / redo | Ctrl+Z / Ctrl+Y |
| Find | Ctrl+F |
| Compile and run in Preview | F9 |
| Start or continue debugging | F5 |
| Step Over / Step Into / Step Out | F10 / F11 / Shift+F11 |
| Stop / restart debugging | Shift+F5 / Ctrl+Shift+F5 |
On macOS, shortcuts with Ctrl use Command.