Welcome to CodeTweaker!
This is an HTML/CSS/JS editor designed for teaching and learning web development. Here's how to use it:
Basic Features:
- Code Editor: Write or paste HTML, CSS, and JavaScript in the left panel
- Preview: Click the Play button (โถ๏ธ) in the center divider to see your code in action
- Helper: Click the Question button (?) to return to this help screen
- Format Code: Click the Format button (โจ) to auto-beautify and indent your code
- Syntax Highlighting: Code is color-coded for easier reading (HTML tags, CSS properties, JS keywords)
Visual Editing:
- Image Mode: Click the Paintbrush button (๐๏ธ) to enter image editing mode
- Edit Images: In image mode, click on any image to open the image editor
- Swap Images: Change image sources, edit alt text, add links, and adjust dimensions
- Text Mode: Click the Pencil button (โ๏ธ) to enter text editing mode
- Edit Text: In text mode, click on any text to open the rich text editor
- Format Text: Modify fonts, colors, sizes, alignment, links, and more
File Operations:
- TweakIt: Opens template gallery to use pre-built examples
- Save: Download your current code as an HTML file
- Load: Upload an HTML file to edit
Search and Navigation:
- Find & Count: Search for text in your code and count occurrences
- Replace: Find and replace text throughout your code
- Navigation Buttons: Jump to specific sections using the Header, Body, Footer, etc. buttons
- TARGET Navigation (T1-T12): Quick jump to
<!-- TARGET-## -->markers - perfect for frequently-edited spots - SECTION Selection (S1-S12): Auto-select entire blocks between
<!-- SECTION-## -->and<!-- SECTION-STOP-HIGHLIGHT -->markers - perfect for AI code generation!
๐ค AI Code Generation (NEW!):
- Smart Selection: Select code manually or use SECTION buttons to select entire blocks
- Generate Button: Opens AI generation modal with your selection as reference
- Quick Prompts: 6 one-click prompts like "New Theme", "Dark Mode", "Animation"
- Keyboard Shortcut: Press
Ctrl+Shift+Gto open generation modal instantly - 3 Action Options: Replace selection, Insert below, or Copy to clipboard
- Context-Aware: The system suggests relevant prompts based on your selected code
- Toast Notifications: Beautiful pop-up confirmations (no more alert popups!)
- UNDO Support: Every generation saves a snapshot - Ctrl+Z to undo if needed
๐ Code Organization Tips:
- Use TARGET markers: Add
<!-- TARGET-01 -->before elements you edit often (forms, hero sections, etc.) - Use SECTION markers: Wrap major sections with
<!-- SECTION-## -->and<!-- SECTION-STOP-HIGHLIGHT -->for easy AI generation - Combine with AI: Click SECTION button โ Click Generate โ Create variations instantly!
- See the GUIDE tab: Full documentation with copy/paste examples in CODE TOOLS panel
Responsive Testing:
Use the resize buttons to test your design at different screen sizes:
- Desktop: (1920px)
- Laptop: (1280px)
- Tablet: (1024px)
- Mobile: (480px)
- Close: (Minimizes the preview)
Theme Customization:
Select from multiple themes using the dropdown menu next to the CodeTweaker logo.
Tips:
- Use comments to organize your code into sections
- The editor will track and display your line count at the bottom right
- Changes to your code won't appear in the preview until you click the Play button
- Use the visual editors for easy formatting without writing code
- Both text and image editing modes work together - you can switch between them
- Use the Format button to clean up messy code with proper indentation
- Syntax highlighting makes it easier to spot errors and read your code
Click the Play button (โถ๏ธ) to start editing and previewing your code!
AI Editor - Detected Sections
Your webpage has been analyzed and broken into editable sections. Click any section to view and copy its code.
๐ฆ Code Snippets
Click any snippet to insert it at your cursor position
๐ก Learning Guide
๐ฏ TARGET & SECTION Navigation System
Use HTML comment markers to organize and navigate your code!
<!-- TARGET-01 -->
Click T1-T12 buttons โ Jumps to marker โ Selects comment only
<!-- SECTION-01 --><section>...</section><!-- SECTION-STOP-HIGHLIGHT -->
Click S1-S12 buttons โ Selects ENTIRE section โ Perfect for AI Generate!
๐ Copy & Paste All Available Markers:
Click inside any code block below to select, then Ctrl+C to copy.
Special Navigation Buttons:
TARGET Buttons (T1-T12) - Quick Navigation:
SECTION Buttons (S1-S12) - Full Block Selection:
โจ Complete Example with Navigation:
๐ค Perfect for AI Code Generation:
- Click S1 button โ Entire section selected
- Click Generate button โ Modal opens
- Click "๐จ New Theme" quick button
- Click "Generate Code" โ AI creates variant
- Click "Insert Below" โ New section added!
๐ก Pro Tips:
โ TARGET: Navigation to specific spots you edit often
โ SECTION: Selecting whole blocks for AI generation
โ Use Header, Navigation, Body, Footer buttons for main sections
โ Add markers before the element you want to select
โ Always include SECTION-STOP-HIGHLIGHT after SECTION blocks
๐ค AI Code Generation (NEW!)
Generate code variations with AI assistance!
Ctrl+Shift+GSelect code โ Press Ctrl+Shift+G โ Generation modal opens instantly!
๐จ New Theme โข ๐ฑ Mobile Breakpoint โข ๐ Dark Mode
โจ Animation โข ๐ Duplicate & Modify โข โฟ Accessibility
๐ฏ 3 Ways to Use Generated Code:
1๏ธโฃ Replace Selection - Overwrites your selected code
2๏ธโฃ Insert Below - Adds new code after selection
3๏ธโฃ Copy to Clipboard - Manual paste wherever you want
โจ Context-Aware Suggestions:
The system analyzes your code and suggests relevant prompts automatically!
Quick Tips
Common Mistakes
Unclosed Tags: Every <div> needs a </div>
Missing Alt Text: Always add alt="" to images for accessibility
Inline Styles: Try using CSS classes instead of style="" attributes
Next Steps
1. Add TARGET/SECTION markers to organize your code
2. Try AI Code Generation with the Generate button
3. Use keyboard shortcuts for faster workflow
4. Experiment! UNDO (Ctrl+Z) has your back
AI Code Generator
(No code selected - will insert at cursor position)