# Palimpsesto A timeline of a document's versions, with a slider to go back in time, side-by-side comparison and a restore button. > Palimpsesto is an exclusive THM Componentes component that shows the version history of a document or artwork. A scrubber moves through versions with the previous one overlaid, compare mode highlights removed and new words and lists what changed, and any version can be restored. It suits document, design and configuration editors. - Category: Apps and productivity - Origin: THM exclusive, built by THM Tecnologia Inteligente; the prompt includes the full source code - Load weight: Light: CSS or light JavaScript, no noticeable cost - Technology: Vue 3, TypeScript - Interaction: Mouse, Touch, Keyboard - URL: https://vibecode.thmtecnologia.com/en/components/palimpsesto/ ## What it looks like It resembles the version history panel of a design tool, inside a light card. The header shows a title, the snapshot count and a switch between timeline and compare modes. The center previews the selected version; in the demo, a small poster whose title, colors and alignment change with each version. Beside it sit the name, author, how long ago it was saved and a restore button. Two sliders pick the version and the blend with the previous one, shown underneath like tracing paper. In compare mode, removed words appear struck through in red and new ones in green. A bottom track lists every version, with stars on milestones. ## You may be looking for this if you asked for something like - “a Google Docs style version history for my editor” - “go back to an older version of the document and restore it” - “compare two versions side by side and show what changed” - “a slider to drag and see how the design looked before” - “show deleted words struck through and new words in green” - “a timeline of changes with who changed what and when” - “that see-through overlay of the previous version under the current one” ## Also known as version history, version timeline, revision history, onion skin, version diff, snapshot history, compare versions ## When to use - Document, design or configuration editors that keep snapshots - Design tools where the team reviews what changed between rounds - Dashboards that need an audit trail with the author and time of each version - Approval flows where clients compare the old proposal with the new one ## When to avoid - Long texts, since the word diff and the preview are built for short content - Source code versioning, where a line-based diff viewer fits better - English interfaces as is, since labels and relative times are in Portuguese ## How to ask your AI ```text Create a version timeline for the proposal editor in my app: a scrubber through snapshots with author and time, an onion skin overlay of the previous version, a compare mode with word diff, a restore button, keyboard support and a preview adapted to my document type. ``` With THM Componentes, you paste the full prompt from the catalog, which already includes this component's source code, and the AI reproduces this exact effect instead of improvising. ## Questions about Palimpsesto ### Does Palimpsesto work with my kind of document? Palimpsesto takes versions through the versions prop, each with a name, author, date, milestone flag and content. The built-in preview draws a poster with a title, subtitle, colors and alignment, and the property diff lists any field that changed. For another kind of document, ask your AI to swap the preview for your own content. ### How does Palimpsesto compare two versions? In compare mode, Palimpsesto puts versions A and B side by side, picked from dropdowns or from the track. Title and subtitle go through a word diff: removed words appear struck through in red on side A and new ones highlighted in green on side B. Below, chips show each changed property with its old and new value. ### Does Palimpsesto work on phones and with a keyboard? Yes. The sliders in Palimpsesto are native range inputs that work with a finger or the arrow keys, and the versions in the track are focusable buttons. On narrow screens the preview and details stack, and in compare mode the two versions sit one above the other. Each version change is announced to screen readers. ## Related components - [Errata](https://vibecode.thmtecnologia.com/en/components/errata/): Shows what changed between two versions of code or text, in red and green, so you can accept or reject each part. - [Lauda](https://vibecode.thmtecnologia.com/en/components/lauda/): A text editor where every line is a block: type a slash to add headings, lists and to-dos, and drag to reorder. - [Alfinete](https://vibecode.thmtecnologia.com/en/components/alfinete/): Numbered pins you drop on an image or screen to comment, reply and mark as resolved. - [Mutirão](https://vibecode.thmtecnologia.com/en/components/mutirao/): An endless whiteboard to stick notes, draw shapes, connect arrows and sketch by hand, like a live workshop wall. - [Retoque](https://vibecode.thmtecnologia.com/en/components/retoque/): Two stacked images or screens and a line in the middle you move with the mouse or a finger to compare. --- THM Componentes: THM Componentes is a catalog of 268 UI components for Vue 3 and Nuxt, 115 of them exclusive, each with a live demo and a ready prompt for Claude Code, Cursor and other AI assistants. Pick the effect, copy the prompt and your AI applies it to your project. Lifetime access for R$ 497 (about US$ 99).