# HTML Layout > Use HTML and CSS to compose dashboard blocks into any structure — slides, paginated reports, custom compositions — beyond what a standard canvas allows. :::info HTML Layout is currently under active development. ::: ## Introduction Standard dashboards excel at monitoring, but they aren't always built for custom formatting. **HTML Layout** frees you from the fixed canvas, allowing you to use HTML and CSS to build highly tailored data experiences. Choose HTML layout when traditional canvas or tab layouts can't support your use case: - **Storytelling & slides**: Create full-screen, sequential presentations with independent section layouts. - **Print-perfect reports**: Build structured, multi-column PDFs with custom headers and footers. - **Bespoke compositions**: Design complex, nested, or asymmetric layouts that are difficult to align on a traditional grid. ## How it works An `HTMLLayout` dashboard uses the same [blocks](/reference/aml/dashboard-blocks) and [interactions](/reference/aml/dashboard-interactions) as a canvas or tabbed dashboard - only the `view` changes. Instead of pixel coordinates, you write HTML and CSS in the `content` field and place blocks inline using ``, which renders the block's default UI at the size its container provides. ```aml Dashboard sales_overview { title: 'Sales Overview' block region_filter: CustomControlBlock { ... } block revenue_chart: VizBlock { ... } interactions: [ ... ] // highlight-start view: HTMLLayout { content: @html ;; } // highlight-end } ``` ## Examples ### Newspaper A broadsheet-style financial newspaper front page with a masthead, ticker tape, stat strip, and a three-column layout that combines live charts with formatted editorial copy.
Show full code ```aml Dashboard html_newspaper { title: 'Newspaper' block title: TextBlock { ... } block v_sroh: VizBlock { ... } // Users signup (column chart) block v_7dri: VizBlock { ... } // Gross sales table block v_np_chart: VizBlock { ... } // Users signup by quarter (column chart) block v_3fjd: VizBlock { ... } // Returns and sales table view: HTMLLayout { content: @html The Capital Ledger Est. 2024 Finance & Capital Markets Wednesday, May 21, 2025 S&P 500 ▲ 5,304.72 +0.34% DOW ▲ 39,112.16 +0.21% NASDAQ ▼ 16,737.08 −0.18% 10Y UST 4.52% GOLD ▲ $2,341.50 WTI ▼ $77.84 −0.9% EUR/USD 1.0812 BTC ▲ $68,420 S&P 500 5,304 ▲ +0.34% VIX 13.42 ▼ −0.8% 10Y Yield 4.52% ▲ +4 bps DXY 104.71 ▼ −0.12% Markets AAPL 189.40 ▲ +1.2% TSLA 174.82 ▼ −2.4% NVDA 882.15 ▲ +3.1% MSFT 418.70 ▲ +0.7% AMZN 185.44 ▼ −0.3% META 501.03 ▲ +1.5% Commodities Gold holds above $2,340 Spot gold maintained gains as safe-haven demand persisted amid geopolitical uncertainty in the Middle East. Oil slips on demand outlook WTI crude slid 0.9% as IEA revised global demand forecasts downward for Q3, citing slowing Chinese industrial output. Copper nears 2-year high LME copper topped $9,800/t on supply tightness and renewed AI infrastructure buildout demand. Lead Story · Federal Reserve Fed Holds Rates, Signals Single Cut in 2024 as Inflation Proves Stubborn Minutes from May meeting reveal a divided committee; two members dissented in favour of an immediate reduction By Staff Correspondent The Federal Open Market Committee voted 10–2 to hold the federal funds rate at 5.25–5.50 percent on Wednesday, marking the seventh consecutive meeting at which policymakers chose to leave borrowing costs unchanged. The decision, widely anticipated by futures markets, was accompanied by updated projections that reduced the committee's median expectation for rate cuts this year from three reductions to just one. Chair Jerome Powell acknowledged that progress on inflation had "stalled somewhat" in the opening months of the year, with core PCE running above 3 percent for the fourth consecutive quarter. The committee would need "greater confidence" before reducing rates, he said. Secondary Story · Treasury Markets Yields Climb as Auction Draws Weak Demand; 10-Year Approaches 4.60% Tuesday's $44 billion 10-year note auction saw the lowest bid-to-cover ratio in over a year, raising questions about appetite for long-duration paper as the fiscal deficit continues to widen. The 10-year yield rose 4 basis points to 4.52 percent. Analysis Opinion The soft landing is real — but fragile Labour markets remain resilient while inflation cools, but a single exogenous shock could snap the thread that keeps this cycle alive. Earnings Big Tech beats expectations for third straight quarter Aggregate earnings for the Magnificent Seven rose 42% year-on-year, driven by AI cloud revenue and cost-cutting across headcount. Private Equity Buyout deal volume rises 18% as credit markets ease Falling leveraged loan spreads and improving LP sentiment revived dealmaking, with Q1 global buyout volume reaching $98bn. Crypto Spot ETH ETF approval seen by July, analysts say SEC's revised engagement with issuers raised approval odds to 70%, according to a Bloomberg Intelligence note published Wednesday. Currency Yen slides past 157, BoJ intervention risks rise The yen tested fresh 34-year lows against the dollar as the Bank of Japan maintained its ultra-loose stance despite political pressure. The Capital Ledger · All data delayed 15 minutes For informational purposes only. Not financial advice. © 2025 Capital Ledger Media ;; } theme { block { background { bg_color: "transparent" } border { border_width: 0 } } } } ```
### Paginated report A two-page A4 annual report with a KPI strip, charts, and a data table. Each page uses fixed `210mm × 297mm` dimensions with `page-break-after: always` for clean PDF output.
Show full code ```aml Dashboard html_annual_report { title: 'Annual Report' block title: TextBlock { ... } block v_sroh: VizBlock { ... } // Revenue by quarter (column chart) block v_gender_donut: VizBlock { ... } // Gender breakdown (donut) block v_dd7r: VizBlock { ... } // Returned vs cancelled (area chart) block v_5eey: VizBlock { ... } // Gross sales (KPI) block v_active_clients: VizBlock { ... } block v_gross_margin: VizBlock { ... } block v_nps: VizBlock { ... } block v_cpu: VizBlock { ... } // Cost per unit (area chart) block v_churn: VizBlock { ... } // Churn rate (area chart) block v_deal_vel: VizBlock { ... } // Deal velocity (bar chart) view: HTMLLayout { content: @html
Annual Report
Total Revenue Active Clients Gross Margin NPS Score Revenue Performance Revenue by Quarter Revenue Mix By Gender Returns vs Cancellations By Quarter
Company Name Page 01 / 02
Operational Review
Efficiency Cost per Unit Retention Churn Rate Pipeline Deal Velocity
Company Name Page 02 / 02
;; } theme { block { background { bg_color: "transparent" } border { border_width: 0 } } } } ```
### Responsive bento grid An asymmetric bento-style layout with three responsive breakpoints (desktop, tablet, mobile). The grid reflows automatically as the viewport narrows, with no JavaScript required — just CSS `grid-template-areas` and `@media` queries.
Show full code ```aml Dashboard html_responsive { title: 'Responsive Dashboard' block title: TextBlock { ... } block v_signup: VizBlock { ... } // Revenue by quarter (column chart) block v_monthly: VizBlock { ... } // Monthly signups (column chart) block v_yearly: VizBlock { ... } // Yearly signups (column chart) block v_conversion: VizBlock { ... } // Net sales margin (KPI) block v_metric_kpi: VizBlock { ... } // Gross sales (KPI) view: HTMLLayout { content: @html bento Responsive demo DESKTOP >1100 TABLET 700-1100 MOBILE <700 Q2 2026 · Performance Revenue is up +24% this quarter. $4.2MTotal revenue 12,480Active customers 98.%Uptime Monthly Signups Net Sales Margin Trend Revenue this quarter Collaboration Active team MR JL SK AN +8 12 members · 4 online now Live feed Recent activity Maria closed deal #4821 2m James updated forecast 8m Sara published report 14m Alex flagged risk 22m Gross Sales Total value of all products sold Channels Acquisition breakdown ;; } theme { block { background { bg_color: "transparent" } border { border_width: 0 } } } } ```
### Slides A five-slide presentation deck with CSS-only navigation using anchor links and `:target`. Each slide shows a live chart alongside a headline and key insight, with prev/next buttons and dot indicators.
Show full code ```aml Dashboard html_slides { title: 'HTML Slides' block title: TextBlock { ... } block v_sroh: VizBlock { ... } // Users signup (column chart) block v_7dri: VizBlock { ... } // Orders by status (donut) block v_s3_area: VizBlock { ... } // Returned vs cancelled (area chart) block v_s4_bar: VizBlock { ... } // Orders by status (bar chart) block v_s5_kpi: VizBlock { ... } // Gross sales trend (area chart) view: HTMLLayout { content: @html DASH·HQ Deck: Q2 Insights FY 2026 · INTERNAL
← Prev 01 / 05 Next → Q2 2026 · Top-line Finding Revenue grewfaster than forecast. We exceeded plan by over 18% this quarter, driven by enterprise expansion and faster time-to-value in onboarding. +18.4% YoY revenue growth, vs +12% Q1 forecast
← Prev 02 / 05 Next → Channel Attribution Enterprise carriedthe quarter. Enterprise contracts accounted for 43.8% of new revenue, up from 31% a year ago. Mid-market held steady. 43.8% share of new revenue from enterprise segment
← Prev 03 / 05 Next → Customer Health Retention hit anew high. Gross retention reached 97.9% — the lowest churn in eighteen months. Expansion revenue from existing customers grew 31% YoY. 97.9% gross revenue retention, ▲ +1.4pp vs Q1
← Prev 04 / 05 Next → Sales Velocity Cycle timecollapsed. Average sales cycle dropped from 53 days to 42 days. The new onboarding playbook shaved meaningful time off every stage of the funnel. −11d reduction in average sales cycle vs Q1
← Prev 05 / 05 ↺ Restart Voice of Customer NPS climbed toan all-time high. Net Promoter Score reached 64, up from 51 last quarter. Customer feedback highlighted faster onboarding and product reliability as the biggest drivers. 64 NPS score, ▲ +13 vs Q1 — record high
;; } theme { block { background { bg_color: "transparent" } border { border_width: 0 } } } } ```
### Tabbed dashboard A four-tab dark analytics dashboard with CSS-only tab navigation using anchor links and `:target`. Each tab reveals a different panel (Overview, Performance, Breakdown, Activity) with KPI cards and live charts, all wired to the same shared blocks.
Show full code ```aml Dashboard html_tabbed_report { title: 'Tabbed Report' block v_tab_trend: VizBlock { ... } // User signups by quarter (column chart) block v_tab_donut: VizBlock { ... } // Orders by status (donut) block v_tab_bar: VizBlock { ... } // Orders by status stacked (bar chart) block v_tab_area: VizBlock { ... } // Returned vs Net Sales (area chart) block v_tab_margin: VizBlock { ... } // Net Sales Margin trend (area chart) block v_tab_acquisition: VizBlock { ... } // User acquisition by month (column chart) block v_kpi_rev: VizBlock { ... } // Gross Sales (KPI) block v_kpi_users: VizBlock { ... } // Total Users (KPI) block v_kpi_margin: VizBlock { ... } // Net Sales Margin (KPI) block v_kpi_return: VizBlock { ... } // Return Ratio (KPI) block filter_date: FilterBlock { ... } // Order Date filter view: HTMLLayout { content: @html DASH·HQ Workspace:Acme Corp Last sync: 2 min ago LIVE
OVERVIEW FY 2025 · ALL SEGMENTS 📅 Gross Sales Total Users Net Sales Margin Return Ratio Revenue Performance MONTHLY TREND Export ↗ Revenue Target Prior Year Mix REVENUE BY SEGMENT Details → Enterprise 43.8% Mid-Market 31.2% SMB 25.0% Funnel PIPELINE Churn RETENTION CURVE Sentiment NPS TREND
PERFORMANCE REVENUE · LIVE METRICS 📅 Q1 — Q2 2026 MRR $82.1K ▲ +8.2% MoM sparkline ARR $985K ▲ +11.7% YoY sparkline Churn Rate 2.1% ▼ −0.3pp vs prior sparkline Stacked View REVENUE BY CHANNEL Export ↗ Distribution PLAN BREAKDOWN Cohort RETENTION HEATMAP
BREAKDOWN USER COHORTS · ACTIVITY 📅 Last 30 days DAU 5,210 ▲ +6.4% vs last week sparkline WAU 14,830 ▲ +3.9% vs last week sparkline MAU 42,016 ▲ +5.1% vs last month sparkline Avg. Session 4m 12s ▼ −14s vs last week sparkline Growth USER ACQUISITION Filter ↗ Mix DEVICE SPLIT
ACTIVITY REPORTS · AUDIT LOG 📅 Last 7 days Generated RECENT REPORTS New report ↗ Report Type Generated Status Q4 Revenue SummaryFinancial2 hours agoReady User Acquisition ReportMarketing1 day agoReady Churn AnalysisRetention3 days agoReady Product PerformanceOperational1 week agoArchived Volume REPORT TIMELINE
;; } theme { block { background { bg_color: "transparent" } border { border_width: 0 } } } } ```
## Limitations **No JavaScript support:** JavaScript is not supported inside HTML Layout. As an alternative, you can use CSS to cover most interactive patterns - the examples above use `:target` for tabs and slides, `@media` for responsive layouts, and CSS animations for entrance effects. ## Syntax reference For the full syntax reference: - See the [AML HTMLLayout](/reference/aml/html-layout) for `HTMLLayout` and ``. - See the [AML Dashboard](/reference/aml/dashboard) for dashboard in general.