Web Elements
Web Elements are the building blocks of your ACENji web applications. Drag and drop these elements onto your pages to create interactive forms, displays, and user interfaces.
Overview
ACENji provides a comprehensive library of elements organized into three categories:
| Category | Description |
|---|---|
| Containers | Layout elements that organize other elements |
| Elements | Input fields, displays, and interactive components |
| Tools | Advanced components like modals and card lists |
Adding Elements
- Open the Website Builder
- Select a page in your application
- Find the Elements Panel on the left
- Drag and drop an element onto your page
- Configure properties in the Floating Design Panel
Element Categories
Layout Elements
| Element | Description |
|---|---|
| Row Container | Multi-column layout container |
Input Elements
| Element | Description |
|---|---|
| Text Input | Single-line text field |
| Text Area | Multi-line text field |
| Numeric Input | Number-only input |
| Phone Number | Phone number input |
| Email input/display | |
| Date | Date picker |
| Checkbox | Toggle checkbox |
| Dropdown | Select dropdown |
| Single Selection Group | Radio-style selection |
| Multiple Selection Group | Multi-select buttons |
| Yes / No / Unknown | Three-option selector |
| Slider | Range slider |
| Rating | Star rating |
| Increment / Decrement | Counter control |
| Rich Editor | Formatted text editor |
| Toggle Switch | iOS-style on/off switch with custom colors and sizes |
| Multiselect Dropdown | Searchable multi-select with chips and max selections |
| Color Picker | Visual color picker with presets, eye dropper, and format toggle |
| File Uploader | Drag and drop file upload with previews and validation |
Display Elements
| Element | Description |
|---|---|
| Info | Static text/HTML display |
| Image | Image display |
| Video | Video player |
| Link | Clickable hyperlink |
| User Info | User profile display |
| Key-Value Table | Structured label-value pair display |
| Badge | Colored inline tags and pills |
| Card Grid | Responsive grid of visual content cards with images and navigation |
| Stat Card | Dashboard metric card with value and label |
| Icon | Standalone icon with configurable size, color, and alignment |
| Shape | Decorative shape: line/divider, rectangle, circle, or triangle |
| Progress Bar | Horizontal bar or circular ring progress indicator |
| Alert | Temporary notification banner with auto-dismiss and animations |
| Pipe Content Renderer | Parses delimiter-separated text into tags, lists, tables, or inline display |
| Reference List | Formatted citation/bibliography list with author, title, year, and links |
Media Elements
| Element | Description |
|---|---|
| Video Gallery | Grid of videos with optional voting |
| Audio Player | Full audio player with playlist, streaming, speed control, and 4 styles |
| Image Gallery | Image carousel with arrows, dots, thumbnails, captions, and aspect ratios |
Navigation Elements
| Element | Description |
|---|---|
| Breadcrumb | Navigation trail with clickable page links |
| Search Modal | Search bar that filters content or navigates to pages |
| Tab Bar | Tabbed navigation that switches between pages |
| Sticky Header | Fixed header with title and back navigation |
Calendar & Scheduling Elements
| Element | Description |
|---|---|
| Calendar View | Monthly calendar with events, navigation, and week numbers |
| Event Card | Styled event card with date badge, time, location, and RSVP |
| Booking | Appointment scheduler with date picker and time slot selection |
| Timeline | Vertical timeline with dated entries, icons, and descriptions |
Content & Marketing Elements
| Element | Description |
|---|---|
| Testimonial | Customer quote card with author, rating, and avatar |
| FAQ Accordion | Expandable question and answer list with search |
| Pricing Table | Side-by-side pricing plan comparison cards |
| Feature Grid | Grid of feature cards with icons and descriptions |
| Team Card | Team member cards with avatar, role, and social links |
| Hero Banner | Full-width hero section with heading and CTA buttons |
Navigation (Advanced) Elements
| Element | Description |
|---|---|
| Pagination | Page navigation with numbered buttons, arrows, and item counts |
| Stepper | Step-by-step wizard with progress indicators |
| Mega Menu | Multi-column dropdown navigation menu |
| Command Palette | Spotlight-style search with categorized commands and shortcuts |
E-Commerce & Payments Elements
| Element | Description |
|---|---|
| Product Card | Product display card with image, price, rating, and add-to-cart |
| Cart | Shopping cart with items, quantities, and pricing breakdown |
| Checkout | Checkout form with shipping, payment, and order summary |
| Coupon | Discount coupon card or promo code input |
| Invoice | Professional invoice with line items and totals |
Data & Navigation Elements
| Element | Description |
|---|---|
| CRUD Grid | Data table with inline editing, sorting, filtering, and CSV import/export |
| Tree Navigation | Hierarchical tree with expand/collapse, search, and dynamic data binding |
| JSON Data Source | Invisible element that fetches JSON from an API and provides data to other elements |
Interactive Elements
| Element | Description |
|---|---|
| Button | Clickable button |
| Card Link | Navigation card |
| Card List | Dynamic card container |
| Modal Form | Popup form |
| Report Download | PDF report generator |
| Proposal Form | Configurable submission form with dynamic fields |
| Approval Queue | Review list with approve/reject actions and status filters |
| Bottom Sheet | Slide-up panel triggered by button click |
| Bookmark List | Displays bookmarked items from localStorage |
Chart Elements
| Element | Description |
|---|---|
| Bar Chart | Vertical or horizontal bar chart with custom colors and value labels |
| Line Chart | Line chart with area fill, smooth curves, and data points |
| Pie Chart | Pie or donut chart with legend and percentage labels |
| Gauge Chart | Semicircular gauge with colored segments and needle |
| Sparkline | Compact inline sparkline for trends and KPIs |
| Heatmap | Color-interpolated grid heatmap with row and column labels |
| Funnel Chart | Funnel chart with trapezoid stages and conversion percentages |
Maps & Location Elements
| Element | Description |
|---|---|
| Map Element | Interactive map with OSM, Google, HERE, and CSV2GEO providers |
| Directions | Route navigation with geocoding, turn-by-turn steps, and travel modes |
| Store Locator | Multi-location map with searchable list panel and distance calculation |
| Geofencing | Geographic zone tracking with enter/exit triggers |
| Address Picker | Structured address form with autocomplete and map preview |
Layout Elements (Advanced)
| Element | Description |
|---|---|
| Sidebar Layout | Two-column layout with collapsible sidebar (web only) |
Tools (Advanced)
| Element | Description |
|---|---|
| Offline Cache | Invisible element enabling offline data caching via localStorage (web only) |
| Deep Link | Invisible element that reads URL query params for navigation and data binding (web only) |
| 3D Viewer | Interactive 3D model viewer with orbit controls, auto-rotate, and optional AR |
| Comment Thread | Threaded comments with replies, editing, deletion, and optional likes |
| Activity Feed | Chronological activity/event timeline with colored type indicators |
| Markdown Renderer | Renders raw Markdown as formatted HTML content |
| HTML Element | Raw HTML/CSS/JS with code editor, live preview, and templates |
Element Properties
All elements share common configuration options:
General Tab
- Question Text / Label - Display text for the element
- Placeholder - Hint text for input fields
- Default Value - Initial value
Color Tab
- Background, border, and text colors
- Separate colors for active/selected states
Dimensions Tab
- Width, height, padding, margins
- Border radius and style
- Typography settings
Position Tab
- Alignment and justification
Events Tab
- Configure actions triggered by user interaction
Connect Tab
- Link to Variable Center or databases
Database Integration
Many elements can save data to the card database:
- Text Input
- Text Area
- Numeric Input
- Checkbox
- Dropdown
- User Info
- CRUD Grid
Enable database saving in the element's Connect Tab.
Best Practices
Use consistent styling - Apply similar colors and dimensions across elements
Group related fields - Use Row Container to organize related inputs
Provide clear labels - Make it obvious what each field expects
Set appropriate defaults - Pre-fill values when helpful
Consider mobile - Test elements on different screen sizes
Use validation - Mark required fields and validate input types
Questions?
If you have any questions, please don't hesitate to contact us. Alternatively, you can submit an issue on this platform.