1. Account & Login

Before using HtmlDrag, you need to create an account. We provide multiple registration and login methods to help you get started quickly.

1.1 Sign Up

HtmlDrag uses email registration. Simply fill in a few basic details to create your account. After successful registration, you'll be automatically signed in and redirected to the homepage.

Email Registration

On the registration page, complete the following steps to create your account:

• Enter email: Provide your frequently used email address. This will serve as your login credential and notification channel. Ensure the email format is correct, e.g., [email protected].
• Set password: Password must contain both letters and numbers, with a length of 8-32 characters. We recommend using a strong password to secure your account.
• Confirm password: Re-enter the password to ensure both entries match.
• Set nickname (optional): You can customize your nickname. If left blank, the system will automatically generate a default nickname for you.
• Agree to Terms: Check "I have read and agree to the Terms of Service and Privacy Policy", then click the "Sign Up" button to complete registration.

Registration page: Enter email and basic information to create account

Email Verification & Credit Reward

After successful registration, the system will send a verification email to your inbox. Upon completing email verification, you'll receive bonus credits that can be used for AI Generator and URL Import features. If you don't receive the email, check your spam folder; you can click "Resend" to request another verification email after 3 minutes.

Tip: Completing email verification not only earns you bonus credits but also unlocks the full experience and enhances your account security.

1.2 Sign In

HtmlDrag supports multiple sign-in methods. Choose the most convenient option based on your preference.

Email & Password Sign In

Sign in using the email and password you registered with:

1. Enter your email address on the sign-in page
2. Enter your password (click the eye icon to toggle password visibility)
3. Click the "Continue" button to complete sign-in

After successful sign-in, you'll be automatically redirected to the homepage where you can start creating.

Third-Party Sign In (Google / GitHub)

For quicker access, you can sign in using your Google or GitHub account:

• Sign in with Google: Click the "Sign in with Google" button. In the Google authorization popup, select your account and confirm authorization.
• Sign in with GitHub: Click the "Sign in with GitHub" button. You'll be redirected to GitHub's authorization page. After confirming, you'll be automatically returned to HtmlDrag.

Sign in page: Supports email/password and third-party accounts

Tip: Using Google or GitHub sign-in automatically creates an account—no separate registration needed. On your first third-party sign-in, the system will automatically create a linked account for you.

Forgot Password Link

If you've forgotten your password, click the "Forgot your password?" link at the bottom right of the sign-in page to enter the password reset process (see Section 1.3).

1.3 Forgot Password

If you've forgotten your password, you can reset it using an email verification code. The entire process is completed on a single page without redirects.

Reset Password Process

Follow these steps to reset your password:

1. Enter email: Provide the email address you used during registration
2. Get verification code: Click the "Send Code" button. The system will send an email containing a 6-digit verification code
3. Enter verification code: Input the 6-digit code you received in the verification code field
4. Set new password: Enter your new password (must contain letters and numbers, 8-32 characters long)
5. Confirm new password: Re-enter the new password to ensure they match
6. Click "Reset Password": Complete the password reset. After seeing the success message, you'll be automatically redirected to the sign-in page

Forgot password: Reset via email verification code

Verification Code Validity

The verification code has a limited validity period—please use it promptly after receiving the email. If the code has expired, you can click the "Resend" button to request a new code (you'll need to wait for the countdown to finish before resending).

Note: If your email is not registered in the system, the verification code cannot be sent. Please ensure you're entering the email address used during registration.

2. Profile

Profile is the central hub for managing your account information, works, and orders. Click the avatar in the top right corner to access it.

Profile: Manage account, works, and orders in one place

2.1 Profile Settings

The Profile Settings module lets you manage your basic account information, including avatar, nickname, email, bio, and password settings.

Change Avatar

Click the "Change avatar" button in the avatar area and select a local image file to upload. The system will automatically crop and save your new avatar.

Change Nickname

Click the edit button next to your nickname, enter a new name, and click "Save". Your nickname will be displayed on all your works and comments.

Email Management

The email section shows your current email address and verification status:

• Verified: Your email has been verified, and all features are available
• Not verified: Click "Send verification email" to complete verification and earn bonus credits
• Change email: You need to verify your current email first, then enter a new email address to complete the change

Bio

Enter your self-introduction in the bio area (recommended: no more than 200 characters), then click "Save" to update.

Change Password / Set Password

Click the "Change password" button to open the password settings dialog:

• Users with an existing password: Enter your current password, then set a new password (8-32 characters, including letters and numbers)
• Users without a password: Set a new password directly. After setting, you can sign in with email and password

Delete Account

To delete your account, click the "Delete account" button at the bottom of the page. For security, you'll need to verify your identity via email verification code.

Note: After submitting the deletion request, your account will enter a retention period (typically 30 days) during which you cannot sign in. After this period, the system will permanently delete your works, credits, and history.

Profile: Manage avatar, nickname, email, and password

2.2 Storage Usage

The Storage Usage module displays your account's storage consumption, helping you understand remaining space and plan your creations accordingly.

Storage Overview

The top section shows your overall usage, including:

• Used: The storage space currently in use
• Total: Your account's storage limit (Pro Plan users enjoy larger capacity)
• Remaining: Available space for creating new works
• Stored works: Current number of saved works and the limit

Storage Breakdown

The system categorizes storage into three types:

• HTML Content: Space used by webpage code of your works
• Image Resources: Space used by uploaded image files
• Other Resources: Space used by other attachments

Work Count Limit

Free and Pro Plan users have different work count limits. When you reach the limit, you'll need to delete some works or upgrade your plan before creating new ones.

Storage Refresh & Upgrade

Click the refresh button to update storage information. For more storage space, click "Upgrade storage" to visit the Membership page and choose a suitable plan.

Tip: If your account storage is full or work count reaches the limit, the system will freeze new work creation. Please delete some works or upgrade your plan to restore upload permissions.

2.3 Files

The Work Management module displays all works you've created, supporting view, edit, share, and delete operations.

Work List & Filters

Works are displayed as cards or in a list. You can filter them using:

• Search: Enter work code or title to search
• Type filter: Filter by AI Generator, File Upload, URL Snapshot, Code Paste, etc.
• Date range: Select start and end dates to filter works from a specific period
• Sort by: Sort by newest first, oldest first, likes count, or view count

Work management: View, filter, and manage all works

View & Edit Works

Click the "View" button on a work card to preview it. In the preview interface, you can:

• Edit the work title (double-click the title to edit)
• Click "Edit" to enter the visual editor and continue editing
• View the work's save history and restore to a specific version

Share Status Management

Pro Plan users can share works, allowing others to view via link:

• Enable sharing: Click the "Share" button to generate a share link valid for 7 days
• Update share: Already shared works can have their links updated, refreshing the validity period
• Stop sharing: Click "Stop sharing" to immediately invalidate the link

Delete Works

Click the "Delete" button on a work card to delete it. The system will show two confirmation dialogs to prevent accidental deletion:

1. First confirmation: Asks if you want to delete this work
2. Second confirmation: Reminds you that deletion is irreversible

Tip: You can delete up to 3 records at a time. After deleting a work, its storage space will be released.

2.4 Credits

The Credit History module displays your account's credit transaction history, including consumption and earning records.

Credit Transaction History

Credit records are displayed in a table containing the following information:

• Date: When the credit change occurred
• Type: The operation type of the credit change
• Points change: Credits added (positive) or deducted (negative)
• Description: Detailed explanation of the change

You can use date range filters to view records from a specific time period.

Credit Types

• AI Generator: Credits consumed when using the AI Generator feature
• URL Import: Credits consumed when using the URL Import feature
• Registration Reward: Credits awarded to new users after registration and email verification
• Platform bonus: Credits gifted by the platform
• Monthly Gift: Monthly credit allowance for Pro Plan users
• Credit Top-Up: Credits obtained through credit purchases
• Admin Adjust: Credits manually adjusted by administrators

Credit history: View credit transaction details

Tip: Pro Plan users receive extra credits each month. Credits can be used for paid features like AI Generator and URL Import.

2.5 Orders

The Order History module displays your purchase history and payment records, making it easy to query and manage orders.

Order Management

The order list shows your purchase records. You can:

• View order status and details
• Use filters to quickly find specific orders
• Continue payment for pending orders
• Close or delete orders you no longer need

Tip: If you encounter payment issues, you can close the current order and place a new one.

2.6 Portfolio

The Portfolio page is your dedicated space for viewing and managing all your creations. Access it quickly from the sidebar or user menu.

Work Display

The page displays all your works as cards, each containing:

• Thumbnail preview: Visual preview of the work for quick identification
• Work title: Shows the work name, click to edit
• Creation time: Records when the work was created
• Share status: Shows whether the work is currently shared

Portfolio: View and manage all your creations in one place

Quick Actions

Each work card provides convenient action buttons:

• Edit: Enter the visual editor to continue creating
• Share: Generate or manage share links (Pro Plan only)

3. Sidebar Navigation

HtmlDrag offers multiple ways to import content into the editor, covering all scenarios from scratch creation to secondary processing. Use the left sidebar to quickly switch between entry points.

Sidebar navigation: Quick access to different creation entry points

3.1 Home

Home is the default entry point of HtmlDrag, featuring the AI Generator. Enter your content here to quickly generate professional web designs.

3.2 URL Import

URL Import allows you to enter any public webpage link, and the system will automatically capture the page content and generate an editable work. This is the ideal way to quickly obtain existing web designs for further editing.

Enter URL

Paste the webpage address you want to capture in the input field. Only public http/https links are supported; private or local addresses are not allowed.

URL Import: Enter URL, capture webpage instantly

Credit Deduction Confirmation

After clicking "Start capture", a credit deduction confirmation dialog will appear, showing the credits required for this operation, your current credit balance, and monthly bonus credits. Monthly bonus credits are deducted first, with any remaining cost deducted from your current credits.

Capture Progress & Status

Once confirmed, the system begins capturing the page content. Please do not leave the page during capture to avoid interruption. After successful capture, you will be automatically redirected to the editor.

Tips:

Some websites cannot be captured: Websites requiring login verification or using complex frontend frameworks (such as some SPA applications) may not be captured or may be incomplete.

Audio/video websites: Dynamic content from audio and video websites may not be captured properly.

Page too large: If the page content exceeds the server's allowed size, the capture may fail. Try a simpler page instead.

3.3 Upload HTML

The Upload HTML feature allows you to import local HTML files into HtmlDrag. The system will perform a security scan and generate an editable work. This is ideal for existing HTML templates or email designs that need further editing.

File Format & Size Limits

Supports .html and .htm file formats. Single file size should not exceed the system limit (see the upload interface for specific limits). Uploaded files undergo advanced processing, which may significantly increase the actual storage size compared to the original file. Please ensure sufficient remaining capacity.

Upload HTML: Drag and drop or click to upload HTML files

Security Scan

The system scans uploaded files for security, detecting and removing potential malicious scripts, dangerous tags, and suspicious external resources. Based on the risk level (low, medium, high, critical), the system will provide appropriate warnings or block saving.

Note: Do not upload files containing malicious code. Malicious uploads may result in account suspension.

Preview & Save

After the file is parsed, you can preview the result in the preview area. Once confirmed, click "Save work" to save the work to your account, and you can enter the visual editor for editing at any time.

3.4 Paste Code

The Paste Code feature allows you to directly paste HTML code, and the system will perform a security scan and convert it to a visual design. This is the most flexible import method, suitable for developers or users who need precise control over the code.

Paste HTML Code

Paste your HTML code in the code input area. You can optionally fill in a work title (if left blank, the system will use the default name "Untitled work").

Paste Code: Directly paste HTML code to start editing

Security Scan

Similar to file upload, the system performs security detection on pasted code. If the code risk level is too high, the system security policy will refuse to process this content. Please review the code and try again.

Note: Do not paste malicious code or scripts. Malicious use may result in account suspension.

Generate Preview & Save

After entering the code, click the "Generate preview" button. Once the code passes the security check, the preview will be automatically generated. After confirming the result, click "Save work" to save the work to your account.

3.5 AI Generator

AI Generator is one of HtmlDrag's core features. Simply enter your content, select size and style, and AI will automatically generate professional web designs for you, making creation simple and efficient.

Enter Content

Enter the content you want to display in the input field, such as product descriptions, event information, personal bios, etc. The more specific the content, the better the AI-generated result will match your needs.

Select Size & Style

The system provides multiple preset sizes (such as long page, wide screen, mobile-friendly, etc.) and style templates. Click on a style card to preview the design example for that style.

AI Generator: Enter content, select size and style

Tip: This is a design style example for generated content. Since it is AI-generated, the final result may vary somewhat from the example.

AI Refinement Toggle

When the "AI Refinement" feature is enabled, the system will intelligently optimize and structure your input content, making the generated design more professional. If you want to keep the original content exactly as entered, you can turn off this feature.

Credit Deduction Confirmation

After clicking the generate button, the system will display a credit deduction confirmation. Each AI generation consumes a certain amount of credits. Monthly bonus credits are deducted first, with any remaining cost deducted from your current credits.

Generation Progress

Once confirmed, the AI begins generating the work, and the page will display the generation progress. Please wait patiently during generation. Upon completion, you will automatically enter the visual editor where you can further adjust the generated content.

3.6 Pricing

The Pricing page is where you manage your subscription and credit top-ups. Choose the plan that fits you best and unlock more creative possibilities.

Membership Plans

HtmlDrag offers monthly, quarterly, and annual membership plans. After subscribing, you'll enjoy full Pro Plan privileges:

Monthly Plan: Full Pro access for 30 days. One-time payment, no auto-renewal

Quarterly Plan: Full Pro access for 90 days. Best value

Annual Plan: Full Pro access for 365 days. Best price

Pricing: Choose the plan that fits you best

Top-Up Credits

If you only need temporary use of AI generation or URL Import features, you can choose to top up credits. Purchased credits never expire, and you can top up anytime when running low—no waiting required.

Feature Comparison

The main differences between Free Plan and Pro Plan are as follows:

Feature	Free Plan	Pro Plan
AI content generation	✓	✓
All templates & styles	✓	✓
Visual editor	✓	✓
Download as PNG	✓	✓
Download as HTML	✗	✓
Share works	✗	✓
Live code editing	✗	✓
Monthly credits	Basic quota	Premium quota
Storage capacity	Basic capacity	Larger capacity

Credit Usage Guide

Each AI generation consumes a fixed amount of credits. Free Plan users receive basic monthly bonus credits, while Pro Plan users receive more. Purchased credits never expire, and you can top up anytime when running low—no waiting for quota recovery.

3.7 History

In the left sidebar, "My Works" (History) provides quick access to your past creations. It lists all your editing records in chronological order.

Quick Select & Edit

Click any record in the list to quickly load it into the editor and continue where you left off, without re-importing.

Preview Window Details

Hover over a history record to see its preview window. In the preview window, you can:

• Edit Title Directly: Click the title text to modify the work name instantly.
• View Share Status: Icons indicate if the work is currently shared.
• Quick Actions: Access edit, delete, and other shortcuts.

History: Quick preview and management of past works

4. Visual Editor

The heart of HtmlDrag is a powerful WYSIWYG editor that lets you work directly in a real HTML environment, eliminating the need for code editing.

4.1 Editor Interface Overview

The editor uses a classic three-column layout: left navigation with work history, center canvas preview area, and right functional panel. Top and bottom bars provide work actions and editing controls.

Editor interface: Left navigation, center canvas, right panel

Left Navigation & History

The left navigation provides quick access points. Click "My works" to expand your work history list for quick navigation and switching. Shared works display a "Shared" badge to help you manage sharing status.

Center Canvas Area

The canvas is the live preview window where you can directly select, drag, and edit page elements. It supports zoom and pan operations via the zoom controller at the bottom. All edits are reflected in real-time.

Right Panel (Edit / Components / Layers / Library)

The right panel contains four tabs: Edit (style adjustments and mode toggles), Components (insert new elements), Layers (layer list and batch operations), and Library (personal component library). Click any tab to switch between features.

Top Title Bar & Actions

The top bar displays the work title (double-click to edit), with action buttons on the right for sharing, downloading as image, and downloading as HTML. Some features require Pro Plan privileges.

Bottom Toolbar

The bottom toolbar provides Preview (opens in new window), Undo, Redo, Refresh preview, Restore last saved state, Restore initial HTML, and Save buttons for core editing controls.

4.2 Basic Operations

HtmlDrag provides intuitive visual operations—hover, single-click, double-click, and right-click cover most editing tasks.

Element Recognition

Hover your mouse over any element on the canvas, and the system automatically detects it and displays a dashed border to help you quickly identify actionable elements. Recognition covers text, images, buttons, containers, and other HTML elements.

Element recognition: Dashed border appears on hover

Drag Mode

Single-click any element to enter drag mode, which displays a selection border with eight resize handles. You can: drag the element to reposition it; drag corner handles to scale proportionally; drag edge handles to resize in one direction. While selected, the right "Edit" panel shows the element's style properties for adjustment.

Drag mode: Click to select, freely move and resize

Edit Mode

Double-click a text element to enter edit mode—the cursor will position inside the text for direct editing. In edit mode, the right panel shows text style tools for font, size, color, bold, italic, and more. Click outside the element or press Esc to exit edit mode.

Edit mode: Double-click to enter, edit text directly

Context Menu

Right-click a selected element to open the context menu, providing quick access to Copy, Paste, Add to Library, link editing, layer operations, Lock, Hide, Delete, and more. See 4.9 Context Menu for details.

Multi-Select

Hold Shift and click multiple elements to select them together for batch operations. In multi-select mode, the right panel displays alignment tools (align left/right/top/bottom edges, center horizontally/vertically, distribute horizontally/vertically) for quick layout arrangement.

Multi-select: Hold Shift and click to select multiple elements

4.3 My works Shortcut Bar

The "My works" shortcut bar on the left allows you to expand/collapse the works list and switch between works quickly, facilitating smooth transitions between multiple creations.

Expand & Collapse

Click the "My works" button in the top left to expand the sidebar work list. Click again or click outside the sidebar to collapse it. When expanded, you can visually browse thumbnails and titles of your history works.

Switch Works

Click any work card in the list to immediately load its content into the editor. This allows you to quickly compare and modify different design drafts without returning to the homepage or profile.

4.4 Canvas Shortcuts

Mastering keyboard shortcuts can significantly boost your editing efficiency. Here are the main shortcuts supported in the canvas area:

Action	Shortcut
Zoom	Ctrl / Cmd + Mouse Wheel
Pan	Space + Mouse Drag
Multi-select	Shift + Click
Copy	Ctrl / Cmd + C
Paste	Ctrl / Cmd + V
Undo	Ctrl / Cmd + Z
Delete	Delete / Backspace

4.5 Right Panel - Edit Tab

The "Edit" tab is the most frequently used area, providing mode toggles and rich style adjustment tools. After selecting an element, the panel intelligently displays editing options based on the element type.

Edit tab: Mode toggles and style tools

Mode Toggles

The top of the panel provides four mode switches to control editor interaction behavior. Each toggle can be turned on or off independently, with a message notification indicating the current state.

Mode	Description
Component Editing	When enabled, you can select and adjust interactive functional components (such as buttons, form inputs, etc.); when disabled, only text content can be edited. Ideal for scenarios requiring precise form element manipulation.
Link Navigation	When enabled, clicking linked elements in edit mode navigates directly to the target URL; when disabled, navigation is blocked so you can edit the link element itself. Note: This setting does not affect preview or downloaded link functionality.
Delete Mode	When enabled, you can delete elements by simply clicking them without using the context menu; when disabled, normal editing mode resumes. Ideal for quickly clearing multiple elements.
Decorative Layers	When enabled, you can identify and edit empty containers and decorative elements (such as border containers, background layers, etc.); when disabled, only elements with actual content are recognized. For complex page layouts, enabling this feature allows finer control over decorative elements.

Tip: Link navigation is disabled by default while editing to allow component editing. To follow links, turn on the "Link navigation" switch in the Edit panel. Form submission is also blocked in edit mode to protect your content.

Text Style

After selecting a text element or entering edit mode, the panel displays comprehensive text style tools with the following formatting options:

Text style: Font, size, color settings

Feature	Description
Font	Choose from system fonts, English fonts (Inter, Roboto, Open Sans, etc.), and Chinese fonts (SimSun, SimHei, Microsoft YaHei, Source Han Sans, etc.).
Font Size	Multiple preset sizes from 12px to 72px, or enter a custom size manually.
Font Color / Background Color	Set text color and background highlight via color picker, with canvas color picker support.
Bold, Italic, Underline, Strikethrough	One-click toggle for bold, italic, underline, and strikethrough effects.
Alignment	Four text alignment options—left, center, right, and justify.
Line Height, Letter Spacing, Paragraph Spacing	Fine-tune line height (1x to 3x), letter spacing, and paragraph spacing for optimized typography.
Superscript, Subscript	Format selected text as superscript or subscript for math formulas, chemical notations, etc.
Bulleted List, Numbered List	Quickly convert text to unordered (bulleted) or ordered (numbered) lists.
Indent Control	Increase or decrease indent to adjust paragraph hierarchy.

Element Style

After selecting any element, use element style tools to adjust its appearance:

Feature	Description
Border Style	Set border type (none, solid, dashed, dotted), width (1px-10px), and color. Click "Clear border" to quickly remove all borders.
Corner Radius	Adjust the corner radius of all four corners to create rounded rectangles or circular effects.
Opacity	Use the slider to adjust element opacity (0%-100%) for transparency effects.
Shadow	Four shadow presets—none, light shadow, medium shadow, deep shadow—for quick depth effects.
Position & Size	Precisely set element X/Y coordinates and width/height values.
Lock Aspect Ratio	When enabled, adjusting width automatically scales height proportionally.

Image Style

After selecting an image element, adjust display options and replace the image:

Feature	Description
Image Fit	Four fit modes—contain (scale proportionally), cover (fill), fill (stretch), none (original size).
Position	Use the 9-grid positioner to set image alignment within its container (top-left, top-center, top-right, center-left, center, center-right, bottom-left, bottom-center, bottom-right).
Replace Image	Upload a new local image or enter a URL to replace. Local upload supports JPG, PNG, GIF, WebP, and other common formats.

Table Style

When a table or table cell is selected, dedicated table editing tools become available. For detailed instructions, see 4.10 Table Editing.

Table style: Row/column operations, borders, and cell settings

Feature	Description
Row/Column Ops	Insert rows above/below, columns left/right, or delete rows/columns.
Cell Alignment	Set horizontal alignment (left, center, right) and vertical alignment (top, middle, bottom) for cell content.
Border Style	Adjust table border width, style (solid, dashed, etc.), and color.
Cell Background	Set cell background color—ideal for highlighting headers or important data.
Merge/Split	Select adjacent cells to merge into one; merged cells can be split back to original.

Link Editing

Add click-to-navigate links to any element, or edit existing links:

Feature	Description
Insert / Edit Link	Enter the target URL to add click navigation to the selected element. Supports http/https links.
Remove Link	Remove the link from the element, restoring it to a regular element. The system will confirm the number of links to be removed before executing.

Alignment Tools (Multi-select)

When multiple elements are selected, the panel displays alignment and distribution tools to help you quickly organize element layouts:

Feature	Description
Align Left / Right / Top / Bottom Edges	Align all selected elements to the leftmost/rightmost/topmost/bottommost element's edge.
Center Horizontally / Vertically	Align the center points of all selected elements horizontally or vertically.
Distribute Horizontally / Vertically	Distribute multiple selected elements with equal spacing horizontally or vertically.

4.6 Right Panel - Components Tab

The "Components" tab provides quick-insert options for various element types, helping you rapidly add new content to the canvas. Click a button to insert the corresponding component.

Components tab: Insert various elements with one click

Component	Description
Insert Text	Insert an editable text block into the canvas. Double-click after insertion to enter edit mode and modify content.
Insert Button	Insert a pre-styled button element. You can edit button text and add a click link.
Insert Image	Opens the image upload dialog supporting local upload or URL input. Single file size and batch upload limits apply—see the upload interface for details.
Insert Icon	Opens the icon picker with six categories—Arrows, Shapes, Symbols, Social, Decorative, and Common. Set icon color and size before inserting.
Insert Table	Opens the table size selector. Hover to choose rows and columns (e.g., 3×4 table), then click to insert.
Insert Link	Insert a linked text element into the canvas. Enter the link URL and display text.
Insert Rectangle / Circle	Insert basic shape elements. Use element style tools to adjust border, background color, radius, and other properties for decoration or layout.

4.7 Right Panel - Layers Tab

The "Layers" tab provides a list view of all editable elements on the canvas, supporting filtering, batch operations, and precise positioning—a powerful tool for managing complex page elements.

Layers tab: Layer management and batch operations

Element Card List

The panel displays all manageable elements as cards. Each card shows the element's tag type (e.g., DIV, IMG, SPAN) and layer level, with text elements showing a content preview. Decorative layer elements are marked with a "Decorative" badge. Quick lock/unlock and hide/show icons appear on the right side of each card.

Filter Options

Click the filter button to filter the list by element state, with the following options:

Filter	Description
All	Show all manageable elements
Locked	Show only locked elements
Unlocked	Show only unlocked elements
Hidden	Show only hidden elements
Visible	Show only visible elements

Batch Operations

After selecting multiple elements in the card list, use the batch operation buttons for unified processing:

Operation	Description
Select All / Invert Selection	Quickly select all elements or invert the current selection
Lock Selected / Unlock Selected	Batch lock or unlock selected elements; locked elements cannot be edited or moved
Hide Selected / Show Selected	Batch hide or show selected elements; hidden elements are invisible on the canvas but remain in the HTML
Delete Selected	Batch delete selected elements with confirmation prompt

Precision Toggle

The Layers tab provides a precision toggle to control element recognition accuracy:

State	Description
Precision On	Auto-deduplicate, showing only host elements to reduce duplicate cards
Precision Off	Show all candidate elements (including inline fragments), ideal for precise inline element operations

Click Card to Locate

Click any element card to automatically scroll the canvas and highlight the corresponding element, making it easy to quickly locate specific components on the page. This is especially useful when working with complex or layered page layouts.

4.8 Right Panel - Library Tab

The "Library" tab is your personal component library where you can save frequently used elements or components for reuse across different works, boosting your creative efficiency.

Library tab: Personal component library

Favorite Component List

The panel displays all your saved components as cards, each showing a thumbnail and name. Thumbnails are auto-generated when saving; unnamed components display as "Untitled".

Search Favorites

Use the search box to quickly find saved components by name. The list filters in real-time as you type.

Insert Favorite Component

Click the "Insert" button on a library card to add that component to the current canvas. Inserted components can be edited and adjusted normally.

Rename / Delete Favorites

Each library card offers "Rename" and "Delete" options. Renaming makes components easier to find later; deletion permanently removes the saved component—use with caution.

How to Add to Library

Select any element on the canvas, then choose "Add to Library" from the context menu to save that element and its children as a component. A "Added to Library" confirmation appears on success.

4.9 Context Menu

Right-clicking a selected element opens the context menu, providing quick access to common actions. Menu content dynamically adjusts based on the selected element type.

Context menu: Quick access to common actions

Menu Item	Description
Copy / Paste	Copy the selected element to the clipboard, or paste clipboard content onto the canvas. Supports cross-work copy and paste.
Add to Library	Save the selected element to your personal library for reuse in other works.
Add/Edit/Remove Link	Add a click-to-navigate link to the element, or edit/remove existing links. Removal prompts for confirmation.
Replace Image	Shown only for image elements; quickly replace with a local upload or URL image.
Move Up / Move Down	Adjust the element's position in the stacking order; moving up brings it forward.
Bring to Front / Send to Back	Move the element directly to the front or back of all elements.
Lock / Unlock	Locked elements cannot be edited or moved, preventing accidental changes. Unlock to restore editability.
Hide / Show	Temporarily hide the element from the canvas while keeping it in the HTML. Show restores visibility.
Delete	Permanently delete the selected element. When multiple elements are selected, the count is shown.

Table-Specific Menu

When right-clicking a table cell, the menu shows additional table-specific operations:

Menu Item	Description
Delete Row	Delete the entire row containing the current cell (cannot delete the last row)
Delete Column	Delete the entire column containing the current cell (cannot delete the last column)

4.10 Table Editing

When a table or table cell is selected, the right panel displays dedicated table editing tools with comprehensive table styling and structure adjustment features.

Table editing: Row/column operations and style settings

Row & Column Operations

The "Rows & Columns" section of the table editor panel provides:

Operation	Description
Insert Row Above / Below	Insert a new row above or below the current row
Delete Row	Delete the currently selected row (cannot delete the last row)
Insert Column Left / Right	Insert a new column to the left or right of the current column
Delete Column	Delete the currently selected column (cannot delete the last column)

Merge / Split Cells

After selecting multiple adjacent cells, use "Merge Cells" to combine them into one. For merged cells, use "Split Cell" to restore them to the original multiple cells.

Cell Alignment

Set cell content alignment in two dimensions:

Dimension	Options
Horizontal	Left, Center, Right
Vertical	Top, Middle, Bottom

Border Style

Customize table border appearance including:

Property	Description
Border Width	Set border thickness
Border Style	Solid, Dashed, Dotted, Double, None
Border Color	Choose border color via the color picker

Click "Apply" to save changes.

Cell Background

Set cell background color using the color picker—ideal for highlighting headers or important data rows.

4.11 Zoom Control & Viewport

The zoom controller at the bottom of the canvas provides zoom and viewport size adjustment, helping you preview your work at different device sizes.

Zoom control: Adjust canvas zoom and viewport size

Zoom In / Zoom Out / Reset

Use the "+" and "−" buttons to zoom the canvas view in or out, or hold Ctrl/Cmd + mouse wheel to zoom quickly. Click the percentage number to reset to default zoom. Hold Space + drag to pan the canvas.

Viewport Size Presets

Click the viewport selector to switch between preview sizes, simulating display on different devices:

Viewport Size	Description
Auto	Match content size, suitable for most scenarios
Desktop 1920×1080 (Default)	Full HD desktop monitor
Desktop 1440×900	Common laptop screen
Desktop 1366×768	Popular laptop resolution
Desktop 1280×720	HD resolution
Tablet 1024×768	Standard tablet device
Mobile 375×812	iPhone and similar mobile devices

Preview Patches

For HTML pages with special structures, three preview patches are available to optimize display. Enabling or disabling patches will auto-save and refresh the preview:

Patch	Description
USP — stabilise ultra-tall pages	Optimizes ultra-tall or boundaryless canvases, reducing jitter. Suitable for complex/boundaryless static files
UFP — fix the viewport width	Restricts viewport width, restoring proper complex layout display
SHP — optimise unusual sizes	Optimizes unusually structured HTML for improved compatibility

Tip: If patches don't show noticeable effect, try "Restore initial HTML" first, then re-enable the patch.

4.12 HTML Editor

The HTML Editor allows you to directly view and edit the complete HTML source code of your work—ideal for advanced users needing fine-tuning or custom code additions. This feature is Pro Plan only.

HTML Editor: Edit source code directly (Pro Plan)

View / Edit Full HTML

When you open the HTML Editor, the complete HTML source code (including <!DOCTYPE html>) is displayed. You can edit the code directly; saving applies your changes.

Search & Replace

Use Ctrl+F to open find, entering keywords to quickly locate code. Use Ctrl+H to open replace for batch text replacement. The toolbar shows match count (e.g., "3 / 15"), with options for individual or replace-all.

Go to Line

Use Ctrl+G or the toolbar jump feature to enter a line number and quickly navigate to that line—useful for large HTML files.

Match Case

Enable the "Match Case" option during search to precisely match case-sensitive content.

Word Wrap

When word wrap is enabled, long code lines automatically wrap for viewing without horizontal scrolling.

Copy / Save

Click "Copy HTML" to copy the complete source code to the clipboard. After editing, click Save to apply changes. If content is empty or contains syntax errors, appropriate messages will appear.

Note: If HTML content exceeds storage limits, saving will show "Insufficient storage, cannot save this edit." Delete unnecessary content or upgrade your plan to increase capacity.

4.13 Bottom Toolbar

The bottom toolbar provides the editor's core action buttons, including preview, undo/redo, restore, and save functions.

Bottom toolbar: Preview, save, and restore

Preview (Opens in New Window)

Click the preview button to open a full preview of your work in a new window, showing the actual display result. The preview page shows a temporary preview notice reminding users this is an editing-phase preview with a non-reusable link.

Undo / Redo

Undo reverts the last operation; Redo restores an undone operation. Supports multiple undo/redo steps. Also available via Ctrl+Z (undo) and Ctrl+Y (redo).

Refresh Preview

Clicking refresh reloads the preview area. The system first saves current content, then refreshes the canvas to show the latest state. Useful after extensive editing to sync the display.

Restore last saved state

Restores the work to the last manually saved state. All unsaved edits will be lost—use with caution. The system prompts for confirmation before executing.

Restore initial HTML

Restores the work's HTML to its original state when first created. All edit history will be cleared. This action is irreversible—ensure you've backed up important content.

Save

Manually saves all current changes. The system also supports auto-save, but manual saving after important edits is recommended to ensure data safety. "Save successful" appears on completion.

4.14 Top Toolbar

The top toolbar displays work information and quick action buttons, providing fast access to sharing and download features.

Top toolbar: Title, share, and download

Work Title (Double-click to Edit)

The top displays the current work title; double-click the title area to enter edit mode and change the name. Title cannot be empty; "Title updated successfully" appears on success. Unnamed works display as "Untitled work".

Share Button

Click the share button to enable work sharing and generate an accessible link. See 4.16 Share Feature for details. This feature is Pro Plan only.

Download Buttons

The right side provides "Download as image" and "Download as HTML" buttons. See 4.15 Download Work for details.

4.15 Download Work

HtmlDrag offers flexible export options, allowing you to download your work as an image or standard HTML file for sharing, archiving, or further development.

Click the "Download as image" button in the top bar to generate and download a high-quality PNG image of the entire canvas content. This is perfect for design showcases, social media sharing, or previews.

Download as HTML

Pro Plan users can export works as standard HTML source files. Clicking the "Download as HTML" button offers two options:

• Download Current HTML: Includes all modifications and adjustments you've made in the editor—what you see is what you get.
• Download Original HTML: Exports the original code from when the work was first created, without subsequent edits.

Download options: Choose between current edited version or original version

4.16 Share Feature

The Share feature lets you generate a publicly accessible link for your work, making it easy to share creations. The share page also provides access statistics. This feature is Pro Plan only.

Share settings: Manage link and status

Settings & Management

• Enable Sharing: Click the share button to generate a unique share link. On first enable, "Sharing enabled, link copied to clipboard" appears.
• Validity: Share links are valid for 7 days by default. You can view the specific expiration time in the share dialog.
• Update Time: If the link is about to expire or you want to extend it, click "Update link" to reset the validity period.
• Stop Sharing: Click "Stop sharing" to immediately invalidate the current link, preventing further access.
• Copy Link: Click the copy button to copy the share link to your clipboard.

Share Page & Stats

Visitors opening the share link will see a standalone presentation page. The right sidebar displays work information, including:

• Title & Author: Shows your nickname and work title.
• Stats: View the Views and Likes to track popularity.
• Expiration: Displays when the share link will expire.

Share page: Visitor view and statistics

Note: If a work is reported and verified for policy violations, the system may disable sharing for that work with the message "This work has been reported and verified, sharing has been disabled by the system."

5. Other Features

In addition to core editing features, HtmlDrag also provides message and feedback features to help you stay updated and communicate with us.

5.1 Messages

The Messages module receives important system notifications, including account status, payment reminders, membership expiration alerts, and feature updates.

Messages: Receive system notifications and alerts

System Message List

The message list is sorted chronologically, showing the title, summary, creation time, and expiration time. Click a message to view details or perform actions (e.g., "Continue Payment", "Renew Now").

Unread Filter

Check the "Unread only" box in the top right to quickly filter for unread messages, helping you focus on important notifications.

Mark All as Read

Click the "Mark all as read" button to instantly mark all messages in the current list as read, clearing red dot indicators.

Message Details

Click a message card to view the full notification content. For order or membership messages, details often include quick action buttons for your convenience.

5.2 Feedback

If you encounter issues or have suggestions, submit them via the Feedback module. You can upload images to better describe your problem.

Feedback: Submit issues or suggestions

Feedback List & Status

The list shows your submission history and current status:

• In Progress: Feedback submitted, awaiting admin review.
• Replied: Admin has responded; click to view.
• Closed: Feedback archived or resolved; no further replies allowed.

Submit New Feedback

Click "New Feedback", enter your content (required, min 10 chars). You can "Upload Images" (max 2MB each) to provide screenshots. Click "Submit Feedback" when done.

Feedback Details & Conversation

Click a list item to view the full conversation history, including your messages and admin replies. The top shows the Feedback ID and attachments.

Continue Reply

For "In Progress" or "Replied" feedback, use the input box at the bottom to provide more info or reply to the admin until resolved.

6. System Tips

During use, you may encounter system alerts or limits. Here are explanations and suggestions for common system tips.

6.1 HTML Detection Alerts

To ensure import quality and editor stability, the system automatically scans URLs and files, alerting you to potential issues.

Local Resource Detection

If a page contains local paths (e.g., file:// or C:/), resources won't load. Suggestion: Ensure all resources use public HTTP/HTTPS links.

Image Hotlink Protection

Some sites block external access to images. Suggestion: Use "Replace image" to upload local files or host them on a public service.

Dynamic Rendering Pages (SPA)

Pages relying entirely on JavaScript (SPA) may import as empty or incomplete because the dynamic DOM isn't captured directly. Suggestion: Use "Paste Code" by copying the rendered HTML from your browser.

External Fonts / Icon Libraries

Fonts or icons with missing CORS headers may display incorrectly. Suggestion: Replace them with system fonts or library icons in the editor.

Embedded Content (iframe)

For security, some iframe content may be blocked or non-interactive. The system preserves placeholders where possible.

6.2 Storage & Limits

HtmlDrag applies resource quotas based on your plan. You may see "Storage limit reached" or "Work limit reached" alerts.

Storage Limit Reached

You cannot save edits or upload files when out of space. Solution:

• Delete old items in "Portfolio" to free up space.
• Click "Upgrade now" in the dialog to get more capacity with a Pro Plan.

Work Count Limit

Free Plan users have a limit on the number of saved works. Delete old works or upgrade to increase this limit.

Image Upload Limits

The system checks single file size and batch limits. If you see "File size exceeds the limit" or "Batch size exceeded", compress images or upload in smaller batches. Pro Plan users enjoy higher limits.

6.3 Security Scan

The built-in Security Scan automatically evaluates content risk when importing URLs, uploading files, or pasting code to protect your account.

Risk Level

Based on threats like XSS, malicious scripts, or dangerous tags, risks are classified as:

• Low risk: Minor warnings; usually safe to proceed.
• Medium risk: Potential issues; proceed with caution.
• High risk: Severe risks; proceed only if the source is trusted.
• Critical risk: Contains malware or phishing content; blocked immediately.

Safe Mode

For files with some risk, the system offers "Safety measures" like Auto Sanitize. You can choose to "Continue in safe mode," where the system removes dangerous code while preserving layout and editability.