This repository demonstrates some essential concept of the UIX framework such as Realm Imports and Web components using the example of a website screenshot app.

The repository includes persistent file storage and implements front-end.

1. Install the UIX command line tool following the Getting Started guide in our documentation.

2. Clone this repository to your local machine:

   $ git clone https://github.com/unyt-org/example-website-screenshot.git

3. Run the project local

   $ uix --port 8000

4. Navigate to your favourite web browser and open http://localhost:8000 to see everything in action.

This diagram outlines the UIX default project structure. We split our code base in back-end, front-end, and commons folder.

.
└── example-website-screenshot/
    ├── backend/
    │   ├── .dx                 // Config file for deployment
    │   └── entrypoint.tsx      // Back-end entrypoint
    ├── common/
    │   └── components/
    │       ├── MainPage.scss   // Main style declaration
    │       └── MainPage.tsx    // Main component
    ├── frontend/
    │   ├── entrypoint.css      // Front-end style declaration
    │   └── entrypoint.tsx      // Front-end entrypoint
    ├── app.dx                  // Endpoint config file
    └── deno.json               // Deno config file

• Take screenshot on the back-end
• Display of screenshot on front-end
• Auto caching support
• Exposes FileProvider on /image/*-route

To provide a seamless experience, our screenshot app demonstrates how to persistently store files. This means that even if the application is restarted, previous screenshots will be stored.

To access files the back-end exposes a route via FileProvider to serve static files.

_{© unyt 2025 • unyt.org}