CodeCraft Pro
Ready 

            
          

        


        
        

          

            

            
          

        


        
        

          

            

            
          

        

      


      
      

        

          HTML 5
          Ln 1, Col 1
          
        

        

          0 lines · 0 chars
          UTF-8
          Spaces: 2
        

      

    


    
    


    
    

      
      

        

          Live Preview
          

            
            localhost:3000
          

        


        
        

          
          
          
          
        


        100% Responsive

        

          
          

          
          

          
          

          
          
        

      


      
      

        

          
        

      


      
      


      
      

        

          

            
              
              Console
            

            
            

              
              
              
              
            

          


          

            
            
            
          

        


        
        


        
        

          >
          
        

      

    

  





















  
  
Drop Project JSON or HTML file to open



































    
    

        
HTML, CSS & JavaScript Playground

        
The HTML, CSS & JavaScript Playground lets you write or paste code and view the resulting web page in a live preview. HTML defines the content, CSS controls its appearance, and JavaScript adds interaction.
 
Edit each language in its own panel, then run the code to see how they work together. Check console messages, adjust preview widths, and save your project or export the combined HTML page.
How to Use This App
  • Enter or paste your HTML code into the HTML editor.
  • Add styles in the CSS editor and interactive code in the JavaScript editor.
  • Click Run to update the preview, or enable Auto-run to refresh it as you type.
  • Check the console for JavaScript messages and errors.
  • Select a preview width to see how your page looks on different screen sizes.
  • Click Save project to download an editable backup, or Open project to load a saved project or HTML file.
  • Click Export HTML to download your combined code as a standalone web page.
Examples and Use Cases
     
  • Practice page styling: Add a heading and paragraph in the HTML editor, then change their colors, spacing, and font sizes in the CSS editor. Watch the preview update as you edit.
    •  
  • Build a click counter: Create a button and a text element in HTML, then add JavaScript that increases the displayed count each time the button is clicked.
    •  
  • Check a responsive layout: Build a set of cards using CSS Grid, then switch between mobile, tablet, and desktop preview widths to check how the cards fit.
    •  
  • Debug JavaScript: Add console.log() calls to inspect values while testing an interaction. Read the console output and error messages below the preview.
    •  
  • Edit an existing HTML page: Load a standalone HTML file using Open project, make changes, and use Export HTML to download the updated page.
    •  
Helpful Details
Keep Code in the Right Editor


The HTML editor accepts a complete HTML document or a fragment. Enter plain CSS in the CSS editor without style tags, and plain JavaScript in the JavaScript editor without script tags. The separate CSS is added to the document head, and the separate JavaScript runs at the end of the body.



Understand Preview Limitations


    
  
  • Use absolute URLs for external images and libraries. Relative file paths may not point to the files you expect.
    • 
  
  • The preview is isolated from the editor. Browser storage, popups, and some network requests may be restricted.
    • 
  
  • Preview widths help check layout changes, but they do not simulate every feature of a real phone or tablet.
    • 
  
  • An infinite loop can freeze the browser tab. Disable Auto-run before editing potentially long-running code.
    • 




Save a Reliable Backup


Automatic draft saving depends on browser storage being available. Clearing browser data or switching browsers can make that draft unavailable. Use Save project to download a JSON backup that preserves the three editors separately. Use Export HTML when you want a combined web page.
Frequently Asked Questions
Can I paste a complete HTML document into the editor?
Yes. The HTML editor accepts a complete HTML document or an HTML fragment. You can also add plain CSS and JavaScript in their separate editors without wrapping them in style or script tags.
What is the difference between Auto-run and Run?
Auto-run refreshes the preview shortly after you stop typing. Turn it off if you prefer to make several changes before clicking Run. You can also press Ctrl+Enter on Windows or Command+Enter on Mac.
How do I save my work and continue later?
Click Save project to download a JSON file containing your HTML, CSS, and JavaScript. Use Open project to load it later. The app also saves a draft in browser storage when available, but downloading a project provides a more reliable backup.
What does Export HTML download?
Export HTML combines the code from all three editors into one HTML file that you can open in a browser or upload to your website. External images, libraries, and other linked resources remain external dependencies.
Can I use external libraries, images, or APIs?
You can reference external resources using absolute URLs, but they require a network connection. Some resources and API requests may fail because of cross-origin rules or restrictions in the isolated preview.
Where can I see JavaScript errors and debugging messages?
The console below the preview displays messages from console.log() and other supported console methods, along with JavaScript errors and unhandled promise rejections. Click Clear to remove the displayed messages.
Related Tools
API Bulk RunnerRun API requests in bulk, replace variables from tabular input, map JSON responses into clean result tables, and export results as CSV or JSON.Baby Name FinderFind baby name ideas across cultures, origins, languages, meanings, styles, and traditions. Filter names, save favorites, and export a family shortlist.Code Compare and MergeCompare and merge code in a private browser workspace with side-by-side diffs, unified patch export, search, and merge controls.Excel SQL ExplorerQuery Excel and CSV files with SQL directly in your browser. Upload a spreadsheet, preview the data, run SQL queries, and export results without setting up a database.Fraud Awareness ToolA browser-only fraud awareness toolkit that helps users check suspicious messages, learn scam warning signs, build a safety action plan, and save local incident notes.Image StudioCompress, resize, crop, convert, watermark, and enhance images directly in your browser with no server uploads.