Cinder Docs
Documentation
User Flow & Interaction Patterns
Understanding how users interact with the Cinder Frontend to accomplish their goals.
Scrape Flow
The typical user journey when scraping a single URL.
Enter URL
User enters a URL in the input field.
Optional: Configure Options
Click the Options button to open Sheet with headers, cookies, exclude tags, and rendering mode.
Click Scrape Button
Submits the form to the backend via remote function.
View Results
Results appear in tabbed interface: Markdown, HTML, JSON.
Copy or Download
User can copy to clipboard or download as file.
Key Interactions
- ✓ Real-time URL validation
- ✓ Form progressive enhancement
- ✓ Instant result tabs
- ✓ Copy feedback (toast notification)
Crawl Flow
The user journey for deep domain crawling with job management.
Enter Base URL
User enters the domain to crawl (e.g., https://example.com).
Configure Crawl Depth
Optional: Set depth limit, URL patterns to include/exclude, and max pages.
Click Start Crawl
Initiates the crawl job. Backend returns a job ID.
Monitor Progress
Live progress bar and scrollable log of discovered links. Auto-polls every 2 seconds.
Pause or Stop
User can pause the crawl to examine partial results or stop completely.
Download Results
Once complete, download the full crawl report as CSV or JSON.
Key Interactions
- ✓ Async job management with polling
- ✓ Real-time progress visualization
- ✓ Live log with auto-scroll
- ✓ Status badges for each link
Search Flow
Combine web search with automatic content scraping. Enter a query, get ranked results, and automatically extract content from matching websites.
Enter Search Query
User enters natural language search query or advanced search operators.
Configure Search Options
Optional: Set result limit, language, region, time range.
Click Search
Submits search query to backend web search API.
Browse Results
Search results appear as cards with title, URL, snippet, and metadata.
Scrape Individual Result
Click "Scrape" button on any result to extract full content.
View Extracted Content
Content appears in modal/drawer for review and export.
Key Interactions
- ✓ Search suggestions and autocomplete
- ✓ Skeleton loaders while fetching
- ✓ Inline scrape without navigation
- ✓ Multiple result export formats
History & Quick Access
Users can store and replay previous requests for efficiency.
Quick-access list of last 10-20 requests with one-click re-run capability.
Forms remember last input values for faster repeated queries.
Error Handling & Recovery
The UI gracefully handles errors and provides users with actionable recovery steps.
User sees error message with retry button. Form state is preserved.
Client-side validation shows errors below the input field. User can fix and resubmit.
Specific error messages with HTTP status codes help debugging.
For long-running operations, timeout errors suggest increasing limits or retrying.
Accessibility & Navigation
✓ Tab to navigate through all controls ✓ Enter to submit forms ✓ Escape to close modals ✓ Arrow keys for menus
✓ ARIA labels on all inputs ✓ Semantic HTML structure ✓ Alt text for icons ✓ Form error announcements