HyperViewer & CSS Support

Pages are rendered using HyperViewer, a native Flutter HTML renderer. It supports a wide range of HTML and CSS, but there are some limitations to be aware of.

What is HyperViewer?

HyperViewer is a custom HTML renderer built specifically for Paxalia. Unlike a WebView, HyperViewer renders HTML and CSS natively in Flutter. This means:

• Fast — no WebView overhead. Pages render instantly.
• Secure — no JavaScript execution. Pages are safe by design.
• Consistent — pages look and feel like the rest of the app.

Supported CSS

HyperViewer supports a wide range of CSS properties. Here are the most common ones:

Text styling

• color — text colour.
• font-family — font family.
• font-size — font size.
• font-weight — bold, normal, etc.
• font-style — italic, normal.
• text-align — left, center, right, justify.
• text-decoration — underline, line‑through, none.
• line-height — line height.
• letter-spacing — letter spacing.

Box model

• width — element width.
• height — element height.
• margin — outside spacing.
• padding — inside spacing.
• border — borders.
• border-radius — rounded corners.
• box-shadow — shadow effects.

Background

• background-color — background colour.
• background — background colour (shorthand).

Flexbox

• display: flex — flex container.
• flex-direction — row, column.
• justify-content — flex alignment.
• align-items — flex alignment.
• gap — spacing between flex items.

Grid

• display: grid — grid container.
• grid-template-columns — column definitions.
• grid-template-rows — row definitions.
• grid-gap — grid spacing.

How to style your pages

There are two ways to style your pages:

1. Inline styles

Apply styles directly to individual elements:

<h1 style="color: #6a5ab9; font-size: 24px;">Welcome</h1>

2. Style tag

Define styles in a <style> block in the head of your HTML:

<style>
  h1 { color: #6a5ab9; font-size: 24px; }
  .hero { background-color: #1c0c5b; padding: 20px; }
</style>

What is NOT supported

For security reasons, HyperViewer does NOT support:

• JavaScript — no <script> tags, no onclick, no onerror, etc.
• CSS animations and transitions — animations are not currently supported.
• Position: fixed and absolute — these are not supported.
• z-index — stacking context is limited.
• External resources — external CSS files or fonts are not loaded.
• Iframes — iframes are blocked for security.
• Embedded media — videos and audio are not supported.

Tips for styling pages

• Use inline styles — they are more reliable than <style> blocks.
• Keep it simple — simple layouts work best.
• Test your pages — preview your page before saving to check the styling.
• Use placeholders — use dynamic placeholders for live data.
• Use the templates — start from a template to get the right structure.

Next steps

Now that you understand CSS support, check out Page Templates to start from pre‑built designs.