Welcome to VibeScribe! Here's a quick guide to get you started:
Core Concepts
- Pages: Your document is made of A4-sized pages. Add pages using the "+ Add Page" button in the sidebar. Navigate between pages using the thumbnails on the left.
- Elements: Add content like Headings, Paragraphs, Lists, and Images using the buttons in the top-left sidebar.
- Selection: Click an element on the page to select it. An active border and resize handles will appear. Image elements will also show a delete button ().
- Toolbar: When a text element (Heading, Paragraph, List) is selected, a contextual toolbar appears on the left side of the main area for formatting. This toolbar also includes a button to delete the selected element.
- Page Margins: The green guides near the left/right edges define the content area for *each page individually*. Drag them to adjust the margins for the specific page you are viewing.
Using Templates
- What are Templates?: Templates are pre-designed document structures that provide a starting point for common document types. They often include multiple pages and placeholder elements.
- Accessing Templates: The template selection modal appears automatically when you click the "New" button in the header. By default, the app starts with the "Modern Manual" template.
{/* MODIFIED */}
- Categories: Templates are organized into categories like Blank, Manuals, Brochures, and Technical. Use the buttons at the top of the modal to switch categories.
- Selection: Click on a template's thumbnail preview to load it.
- Important Note: Selecting a template will **replace** your current document. Make sure to save any work you want to keep before choosing a new template.
Working with Elements
- Adding: Click the desired element type in the sidebar (Heading, Paragraph, etc.). It will appear on the current page, respecting the page's margins.
- Moving: Click and drag the body of a selected element to move it. It will snap to the grid if enabled and stay within the page's margins.
- Resizing: Click and drag one of the four square handles at the corners of a selected element. Resizing is constrained by the page's margins and minimum element size.
- Deleting:
- For **Images**: Click the red 'X' button () that appears on the selected image.
- For **Text (Heading, Paragraph, List)**: Select the element and click the "Delete" button in the main toolbar that appears on the left.
- Text Editing: Double-click inside a selected Heading, Paragraph, or List element to start editing its text. Click outside or press Esc (may depend on browser) to finish.
- Image Editing: Double-click a selected Image element to open the image library/upload modal.
Formatting Text
When a text element is selected:
- Use the toolbar on the left to change Font Family, Font Size, Text Color, Bold, Italic, Underline, and Alignment (Left, Center, Right).
Saving & Loading
- Save (Browser): Saves your current work (including per-page margins) to your browser's local storage. Good for temporary work, but can be cleared by browser settings.
- Save As... (File): Saves your document (including per-page margins) as a `.vibe` file to your computer. Use this for permanent storage and sharing.
- Load... (File): Loads a previously saved `.vibe` file from your computer, replacing the current document. It will load per-page margins if they exist in the file, otherwise it uses defaults.
- New: Clears the current document (after confirmation) and shows the Template Selector.
Other Features
- Undo/Redo: / Use the buttons in the header or Ctrl+Z / Ctrl+Y to undo/redo actions (element changes, page structure). Settings, current page view, and page margins are **not** affected by undo/redo.
- Export (Print/PDF): Opens your browser's print dialog. You can typically choose "Save as PDF" from there. Content respects each page's margins.
- Theme Toggle: / Switch between light and dark modes (sidebar remains dark).
- Settings (Sidebar): Toggle Auto-Save, change its interval, and toggle the Snap-to-Grid feature and grid size.
- Margin Guides: (Reminder) The green lines are specific to each page. Drag to adjust that page's content boundaries.