Dev Panel
Overview
The Dev Panel is the visual development interface of BWEB. It allows you to create and modify web pages directly in the browser, without writing HTML code.
Opening the Dev Panel
The Dev Panel opens via the icon in the top right corner of the screen when you are logged in as an administrator. It closes automatically when the mouse leaves the area.
- Pin: keep the panel open permanently
- Lock: fix the panel width
- Grid: display the grid overlay for containers and blocks
The 27 block types
BWEB offers 27 native block types to build your interfaces:
| Category | Block types | Usage |
|---|---|---|
| Structure | wrapper, tabs, accordion | Organize and group elements |
| Content | text, title, richText (Quill), code, html | Display text and rich content |
| Media | image, video, icon, carousel | Visual and multimedia elements |
| Navigation | button, link, menu, breadcrumb | Actions and navigation |
| Forms | formField, fieldInput, fieldSelect, fieldTextarea, fieldCheckbox, fieldRadio, fieldInputFile | Data entry |
| Data | listbox, repeat/forEach, renderPage | ORDA data display |
| Advanced | renderFile, map, chart | Specialized components |
Block properties
Each block has configurable properties in the side panel:
- CSS Properties: visual styles per breakpoint (xs, sm, md, lg, xl, 2xl)
- HTML Properties: HTML attributes (id, class, data-*)
- Object Properties: block data and content
- Block Properties: behavior specific to the block type
- Events: interactions (onClick, onChange, onLoad)
- Constraints: validation rules
- Conditional Display: block display conditions
Drag and Drop
Reorganize your blocks by drag and drop. The Dev Panel displays the block hierarchy as a tree, and you can move a block from one container to another.
Responsive Design
The Dev Panel includes a breakpoint selector to preview and adjust the design at each screen size:
| Breakpoint | Width | Target |
|---|---|---|
| xs | < 640px | Mobile portrait |
| sm | 640px+ | Mobile landscape |
| md | 768px+ | Tablet |
| lg | 1024px+ | Desktop |
| xl | 1280px+ | Large screen |
| 2xl | 1536px+ | Extra large screen |
Undo/Redo
The Dev Panel has an undo (Ctrl+Z) and redo (Ctrl+Y) function to revert your changes.
Instant preview
Every change is visible in real time on the page. The Dev Panel communicates with the 4D server via WebSocket to apply changes without page reload.