This is a client-side React app for the 4x4 Grid Visual Editor.

The entrypoint for the frontend is /frontend/index.html. This is the HTML page that is returned at the root from /backend/index.ts.

This HTML file imports /frontend/style.css from /public/style.css and /frontend/favicon.svg from /frontend/favicon.svg. Everything in /frontend/ is mapped to /public by /backend/index.ts. This is just a convention. You could import & serve everything out of the same folder name.

This HTML file has a <div id="root"></div>, which is where we mount the React app.

This HTML file imports /frontend/index.tsx from /public/index.tsx, which is the entrypoint for all frontend JavaScript, including all the React. It is not a problem that it imports a file with a .tsx extension because browsers ignore file extensions. They only pay attention to content-types, which is great, because all these files will be returned as transpiled JS with the appropriate JS content type by stevekrouse/utils/serve-public.

This file is the entrypoint for frontend JavaScript. It imports the React app from /frontend/components/App.tsx and mounts it on <div id="root"></div>.

It also looks for bootstrapped JSON data at window.__INITIAL_DATA, and passes that to the <App />.

As of this writing Val Town only supports text files, which is why the favicon is an SVG and not an .ico or any other binary image format. If you need binary file storage, check out Blob Storage.

This directory contains the React components:

• App.tsx - Main app component with tab navigation
• GridEditor.tsx - Interactive 4x4 grid editor with save functionality
• SavedGridsView.tsx - Read-only view of all saved grids

• Interactive Grid: Click cells to toggle between black and white
• Real-time Text Output: Shows the textual representation as you edit
• Save Once: Grids can only be saved once to prevent duplicates
• Copy to Clipboard: Easy copying of text representations
• Responsive Design: Works on mobile and desktop