[firecrawl-ui] Redesign UI: Glass/Aurora playground and URL launcher#89
Merged
Conversation
Replace the default Vue scaffold theme with a warm fire identity: ember-orange brand ramp, amber accents and warm-neutral light/dark themes. Keep the existing CSS variable names so every view inherits the new look, and add reusable primitives (cards, buttons, badges, section titles) plus unified form controls, focus rings and scrollbars.
Rework the sidebar into a branded navigation rail: fire-gradient logo mark and wordmark, lucide-style inline SVG icons per route, an ember active-state indicator, a labelled theme switch in the footer and a local-only badge. Add a scrim-backed mobile drawer.
Drop the hardcoded blue/Montserrat styling for the Ember tokens: glowing fire-gradient logo tile, gradient-clipped wordmark, responsive feature grid with hover accent lines and an about section with ember bullets and call to action.
Replace hardcoded blues, greens, error reds and grays across the crawl, scrape, extract, map, search, about, api-config and api-key views with the shared design tokens, so every screen matches the new identity and renders correctly in both light and dark themes.
Replace the sidebar shell with a top app bar (brand, tool tabs, theme and settings actions) and introduce the shared two-pane playground primitives: PlaygroundLayout (request/response split with response tabs, status bar and empty/loading/error states), plus CodeBlock and CopyButton for output panes.
Move each tool (scrape, crawl, extract, map, search) into PlaygroundLayout: the configuration form lives in the request pane and results are split across response tabs (preview, JSON, links, pages, etc.). API calls, polling and all component logic are preserved; only the template and styles change.
…ngs card Home becomes a compact hero plus a quick-launch grid mirroring the top-bar tabs; the API configuration page becomes a centered settings card consistent with the playground surfaces.
Replace the Ember orange token system with a cool violet/cyan glass language: frosted-glass tokens plus a reusable .glass utility, an aurora palette (violet, magenta, cyan), and dark as the default theme. Old Ember/fire variable names are kept as aliases so unmigrated surfaces keep resolving during the transition.
Fixed full-viewport aurora layer of four slowly drifting, heavily blurred blobs behind a frosted-glass topbar and tab bar. Drift is GPU-cheap (transform only) and freezes under prefers-reduced-motion.
Gradient-text wordmark, glowing glass logo mark, and frosted tool cards with hover-lift and soft neon halos over the aurora canvas.
Restyle Scrape, Crawl, Extract, ApiConfig and About along with the Map, Search and ApiKeyInput components as frosted-glass surfaces: translucent panels, hover-lift on cards and result rows, and violet/cyan accents in place of every fire gradient and orange glow.
Replace the landing with a functional launcher: pick an action (scrape/crawl/map/extract), paste a URL and go straight into that tool. The launcher routes with a url query param and each tool now reads route.query.url to pre-fill its URL field on load, so a quick one-off scrape needs no typing twice. Direct tool pills sit underneath.
When no API key and no custom API URL are set, the home shows a notice linking to the config page and the launcher routes there instead of a tool that would only 401. A self-hosted install (custom API URL, possibly without a key) counts as configured, so the notice stays hidden for it.
- Darken --color-text-mute in both themes (3.0-3.6:1 -> ~4.7-5.1:1 on glass). - Make the button gradient violet-600..violet-800 so white labels keep >= 4.5:1 (the old violet-500/cyan stops failed under white); the bright violet->cyan sweep stays in --gradient-aurora for decorative use only. - Add a visually-hidden <h1> to the home launcher (page had no level-one heading). - Replace the incomplete role=tab pattern (no arrow-key handling) with aria-pressed buttons on the home action selector and the playground tabs. - Add type=button to non-submit buttons inside forms (crawl/extract/search/ api-config and the theme toggle) to prevent accidental form submission.
The home tool pills (Scrape/Crawl/Extract/Map) were plain links that dropped a URL already typed in the launcher bar. They now route with the same ?url= query when a URL is present, so clicking a tool never silently loses it.
Restructure the README to the standard layout (badges, Mermaid flow, feature and command tables, configuration) and document the current UX: URL launcher, two-pane request/response playground, light/dark glass theme, local config and self-hosting. Replace the stale screenshots with new captures of the redesigned home, scrape, crawl and extract views.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Full UI redesign of Firecrawl UI.
Test plan
npx prettier --check .: cleannpx eslint .: cleannpm run build: passesKnown follow-up: Extract against a self-hosted v2 instance returns a 200 async job id that the UI does not yet poll for, so it reports "Extraction failed". Tracked separately.