Nice browser. Is it antique?
No, seriously - your browser is so old that some features of patternplate don't work as expected.
Don't worry - you can either continue with a restricted version or install an up-to-date browser.
We messed up.
Sorry, but your user experience might be affected.
- Try reloading the page
- Report the problem at github.com/patternplate/patternplate

Alva Data Flow

A diagram describing the technical data flow inside Alva.

Edit

graph BT
    subgraph MainProcess
        mainContext(Model.Project)

        webpack-- Bundle -->mainContext
        ts-- Interfaces -->mainContext

        subgraph Analyzer
            webpack(Webpack)
            ts(Typescript)
        end

        subgraph AlvaServer
            http(Http Server)
            ws(WebSocket Server)
        end

        mainContext-. Updates .-ws
    end

    subgraph BrowserWindow
        subgraph Chrome
            clientContext(Model.Project)
            http-- Initial Html -->clientContext
            ws-. Updates .-clientContext
        end

        subgraph PreviewIFrame
            previewContext(Model.Project)
            http-- Initial Html -->previewContext
            ws-. Updates .-previewContext
        end

    end

    style webpack fill:#F4743B,stroke:#545454,stroke-width:2px
    style ts fill:#F4743B,stroke:#545454,stroke-width:2px

    style http fill:#F1F7ED,stroke:#545454,stroke-width:2px
    style ws fill:#F1F7ED,stroke:#545454,stroke-width:2px

    style mainContext fill:#17BEBB,stroke:#545454,stroke-width:2px
    style clientContext fill:#17BEBB,stroke:#545454,stroke-width:2px
    style previewContext fill:#17BEBB,stroke:#545454,stroke-width:2px
    linkStyle 4 stroke:#DDBEC8,stroke-width:2px,stroke-dasharray: 5, 5
    linkStyle 6 stroke:#DDBEC8,stroke-width:2px,stroke-dasharray: 5, 5

SVG Diagram

Mermaid Diagram