# IDE and project structure

Find the main files, panels, commands, and keyboard shortcuts.

URL: https://webrad.atentor.com/docs/ide-e-projetos
Updated: 2026-11-07

## 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.