docs › guidance › the web panel

the web panel

goo can embed a live Chromium webview anywhere in your tree. the blob for that is WebPanel. drop it inside a Container, give it a Url, and it renders the page inside your layout the same way any other blob does.

a page in the tree

give a WebPanel a Url and a size and it renders inline:

new Container
{
    Width  = Length.Percent( 100 ),
    Height = Length.Percent( 100 ),
    Children =
    {
        new Goo.WebPanel
        {
            Url    = "https://google.com/",
            Width  = Length.Percent( 100 ),
            Height = Length.Percent( 100 ),
        },
    },
}

Url is the content surface. everything else is layout: Width, Height, Margin, flex properties. goo diffs this blob against the engine WebPanel on every rebuild and applies only what changed, the same structural diff every blob goes through; see build method.

pausing and hiding

a webview keeps running even when it is not visible: it ticks JavaScript, repaints, and plays any audio or video. Paused = true throttles all of that without removing the panel. unmounting it (leaving it out of Children entirely) stops it completely, but it's a heavier operation: the page reloads from scratch when it comes back.

the blessed docs probe (Code/Demo/DocsProbes/DocsWebProbeUI.cs) drives both independently, one button per behavior:

bool _visible = true;
bool _paused;

var slot = new Container { Key = "web-slot" };
if ( _visible )
    slot.Children.Add( new Container
    {
        Key          = "web-wrap",
        BorderRadius = 12,
        Overflow     = OverflowMode.Hidden,
        Width        = 640,
        Height       = 420,
        Children =
        {
            new Goo.WebPanel
            {
                Url    = "https://google.com/",
                Paused = _paused,
                Width  = Length.Percent( 100 ),
                Height = Length.Percent( 100 ),
            },
        },
    } );

the pause button flips _paused; goo rebuilds automatically once the click handler returns, so no explicit Rebuild() call is needed here (the basic state loop is covered in managing state, and the underlying AutoRebuildOnEvents trigger is covered in build method). the page freezes in place (the demo's search-box caret stops blinking) and resumes on the next toggle. the hide button flips _visible, which drops the WebPanel out of slot.Children on rebuild and adds it back later: the panel is destroyed and recreated, not just frozen.

the style surface

WebPanel subscribes to a smaller style surface than Container: sizing, margins, flex, BackgroundColor, BackgroundTint, Opacity, Transform, the position offsets (Position, Top, Left, Right, Bottom), PointerEvents, and BorderRadius (uniform, plus the four per-corner variants). it does not expose Padding, border color or width, ZIndex, Cursor, Gap, background-image, mask, filter, perspective, outline, Order, or Overflow: the properties only Container carries.

BorderRadius on a WebPanel rounds its own box but has no visible effect on the page: the webview paints its own rectangular surface underneath the style facade and does not clip to it. WebPanel does not expose Overflow at all, so corner clipping has to come from a wrapping Container instead, exactly as the pause/hide example above does: BorderRadius = 12 plus Overflow = OverflowMode.Hidden on the wrapper clips the page, not the WebPanel's own (ineffective) BorderRadius.

for any other container-only property next to a WebPanel, like Padding, Cursor, or ZIndex, the same wrapper pattern applies: put the property on the Container, put the live page on the WebPanel inside it. the pattern is described for all engine-special blobs in styles.

the full property surface WebPanel exposes through its style facade is in the webpanel reference.

see also