Learn Aevilo.

Getting started

This guide covers Aevilo 1.0 for Chrome.

1. Install Aevilo from the Chrome Web Store once it is listed, then pin it from the puzzle-piece menu so its icon stays in the toolbar.
2. Choose about page reading. After installing (and after updates that change it), Aevilo asks whether it may read the layout of pages automatically to animate them as they open. Until you choose, it reads nothing on its own. Inspection tools work either way, on the page you point them at.
3. Open the dashboard from the toolbar popup. Design groups inspection and styling tools; Animate brings together motion and page construction; Projects holds saved work. Pro Studio opens the fullscreen editing workspace.

Pro Studio

Open Pro Studio from the dashboard, choose Open a website, and select a tab or enter a page address. Work with the element layers, style controls and motion timeline, then save your project.

For an embedded page, use Fit to see the whole viewport, Fit width for more detail, or choose a zoom percentage. Device sizes change the canvas preview. If a site cannot be embedded, use live-tab mode; its page stays in a separate tab and canvas zoom does not apply.

Copy and paste styles with Ctrl Alt C / V on Windows, or ⌥ ⌘ C / V on Mac. The menu commands are also available. Reloading a page resets undo history; saved work and recoverable drafts are separate from undo history.

Inspecting a page

Press Alt Shift E, use the popup, or the tab at the page edge. Hover to outline, click to select. ↑ and ↓ move to the parent and first child. Links and buttons do not activate while you pick.

The side panel shows the selected element’s box, typography, colours and computed styles, with copy buttons. The dashboard adds Design System (palette, type scale, spacing), Responsive (breakpoints and matching rules) and Assets.

Customising a site

Open Aevilo Styles from the popup or side panel and choose Edit page. Click an element and use the tabs: Appearance, Typography, Layout, Effects and Advanced. Changes can apply to This element or All similar, and to the Normal, Hover or Focus state.

Everything is a preview until you save. Undo and redo cover every step (Ctrl Z / Ctrl Shift Z). The Advanced tab has a code editor for your own CSS, with plain-language errors.

Saving themes

Press Save theme (Ctrl S). A theme belongs to one website and comes back whenever you visit. One theme is active per site; switch between them in Aevilo Studio, where each keeps up to 15 earlier versions.

Restore original (editor, side panel or popup) turns a site back to its real design immediately. The Website themes switch turns every theme off everywhere.

Animations

Page construction: in Animation Studio, choose a style, speed and level of detail; pages then assemble as they open. Replay with Alt Shift L, switch automatic construction with Alt Shift K.

Motion Studio: open it from the dashboard’s Animate workspace or use the popup’s motion-editing action on a page. Select elements, arrange tracks and keyframes, choose timing and triggers, preview, then save a preset. Enable automatic playback to restore it on later visits. Presets can be switched off without deleting them.

Exporting and sharing

Themes export as a .aevilo-theme.json file; motions as CSS, CSS with trigger support, a standalone JavaScript runtime, or an editable Aevilo recipe. The standalone runtime’s aeviloMotion.play() starts manual tracks. Scroll-linked exports depend on browser ViewTimeline support. Review export contents before sharing; imported files stay off until reviewed.

Back up all saves every theme or preset with its history. Restoring a backup merges: nothing you made since is overwritten.

Aevilo AI

Aevilo AI uses Chrome’s built-in, on-device model when Chrome makes it available on your device. Without it, Aevilo answers from its own reference notes and rules, and says so. You decide what page data to attach; proposals for the page are previewed and applied only when you choose.

Privacy and data

Themes, animations and design settings are stored in your browser. Settings → Privacy Center manages those local records and your page-reading choice. Enabled accounts, support submissions and billing use server records separately. Cloud synchronization is not available.

Troubleshooting

• Nothing happens on a tab. Tabs opened before Aevilo was installed or updated need a reload. Aevilo cannot run on Chrome’s own pages (settings, the Web Store) by design.
• A theme or motion stopped matching. Sites change their markup. Aevilo skips anything that no longer matches rather than styling the wrong element, and marks it in Aevilo Studio or My animations. Edit it and select the element again.
• Pages do not construct. Check the page-reading choice (Settings → Privacy Center), the Page animations switch in Animation Studio, and Automatic construction.
• A site looks broken after a change. Use Restore original, or pause all motion in Motion Studio. Your saved work is kept.
• Not saved: storage is full. Free space in the Privacy Center, or export and delete old themes and presets.