A local WebGL workflow for tile previews
Tilekind Room Preview is an open-source editor for exploring tile layouts on a room image. Its standard preview runs locally, without an AI API key. You define the surfaces, choose a texture, adjust its layout and export an image to compare visual ideas.
The project was prepared for Tilekind, an Australian online tile retailer. This walkthrough introduces the local workflow and the boundaries described in the project's documentation. It is an experimental visual planning tool, so the result should be read as an illustration rather than a measurement or a product specification.
Run the editor locally
The repository requires Node.js 22.9 or later. Clone or download the Tilekind Room Preview repository, open a terminal in its folder and run:
npm ci
npm start
Open the local address printed by the server. Keep that terminal running while using the editor; Ctrl+C stops the server.
The standard preview needs a modern browser with WebGL. It makes no requests to an AI provider and needs no API account. The supplied server binds to loopback. The README describes the application as a desktop-first editor for a single trusted local user; it should not be exposed as a public hosted service without further work.
Begin with the supplied demo
The demo is a useful starting point because its room and three texture swatches are reproducible geometric fixtures. They are not photographs of an installed room or real tile products.
Select the floor or back wall, choose a texture in the region settings and open the non-AI tile preview. Change rotation, scale and grout settings to see how those controls affect the repeated pattern. Then use Edit regions to adjust the surface boundary.
Starting with the demo keeps the first experiment simple. You can learn how the controls behave before introducing the uneven edges, furniture and perspective of a room photograph. The fixtures can also be regenerated with npm run fixtures when working on the package.
Define surfaces and protect foreground objects
The editor supports up to four regions. Four corners and Rectangle provide ways to define the plane where a texture should appear. The preview projects a repeated texture into that plane.
Protect outlines furniture, windows or other areas that should retain the original image. That makes the region boundary and the protected area separate editing decisions: a wall may need a large tiled plane, while an object in front of it needs to remain visible.
Use undo and redo to compare boundary changes. The documented shortcuts are Ctrl/Cmd+Z and Ctrl/Cmd+Shift+Z. PNG export is part of the documented workflow. The verification notes confirm that the export button opened Chrome's Save dialog, but the saved-file contents were not independently checked. Check an exported image before using it as a reference.
Keep the preview's assumptions visible
The plane dimensions are assumptions from the demo or editor defaults. They are not measurements recovered from the photograph. A convincing perspective match does not establish a wall's dimensions or the quantity of tiles needed.
Colour, apparent tile scale and grout in the image are illustrative. The tool does not calculate lighting, slip ratings or installation suitability. A preview can help narrow a visual choice, but physical samples and the supplier's product information remain necessary before purchase or specification.
The editor includes a room-image chooser for JPG, PNG and WebP files. Large images are reduced locally to a maximum edge of 2,048 pixels. The README also records that automated photo selection was blocked at the browser file chooser and that a complete manual photo-upload check remains outstanding. That limitation matters when evaluating the current release.
Treat AI generation as a separate workflow
Optional AI generation uses a provider and model configured on your own computer. The project does not include a paid service or an API key. Follow the repository's AI-SETUP.md instructions rather than assuming that any chat-compatible endpoint can generate images.
The local preview and AI generation have different data boundaries. Loading an image for the local editor stays local. AI generation asks for confirmation before sending the image to the configured provider. Provider charges may apply.
The repository describes local job records and request identities intended to support recovery. It also states that a timeout or cancellation does not guarantee that the provider stopped processing or billing. Opening an existing result and starting a new generation should therefore be treated as different actions.
Check geometry and rendering separately
The documented test command is:
npm test
Those tests cover perspective corner mapping, inverse mapping, invalid geometry, winding and the local HTTP and asset boundary. They do not replace checking the browser's rendering and editing behaviour. This walkthrough does not claim a new test run, completed mobile verification or a successful paid live-provider generation.
Code and the generated example fixtures are provided under the MIT licence. Tilekind branding is not a grant of trademark rights. The repository's PROVENANCE.md explains the source and asset boundaries; the package does not distribute third-party room photos, supplier textures or customer data.
If you try the project, begin with the demo, change one setting at a time and read the verification notes in the README. That gives a clear starting point for evaluating the editor and contributing a reproducible issue or improvement.
Disclosure: This article was drafted with AI using the linked project's published documentation. It contains no customer case study, usage-growth claim or independent performance benchmark.