1. HTML Editor

Function: The HTML Editor allows users to write and edit HTML code, forming the structure of web pages.

How to Use:

1. Open the HTML Editor tab.
2. Write your HTML code in the editor window.
3. The live preview pane updates automatically, showing the rendered output.

<h1>Welcome to HTML Playground</h1>
<p>This is a paragraph.</p>
    

2. CSS Editor

Function: The CSS Editor allows users to style their HTML elements, customizing their appearance.

How to Use:

1. Navigate to the CSS Editor tab.
2. Write CSS rules to style HTML elements.
3. See the changes in the live preview pane.

h1 {
color: blue;
font-size: 2em;
}
p {
color: gray;
font-style: italic;
}
    

3. JavaScript Editor

Function: The JavaScript Editor enables users to add interactivity and dynamic behavior to web pages.

How to Use:

1. Switch to the JavaScript Editor tab.
2. Write JavaScript code to manipulate HTML elements or add functionality.
3. Interact with the live preview to test your script.

document.querySelector('h1').onclick = function() {
alert('Hello from JavaScript!');
};
    

4. Python Editor

Function: The Python Editor supports Python scripting, useful for backend tasks, data analysis, or algorithm testing.

How to Use:

1. Open the Python Editor tab.
2. Write Python code in the editor.
3. Run the code to see the output in the console.

print("Hello, Python Playground!")
    

5. Live Preview

Function: Displays real-time updates of your code in the preview pane.

How to Use:

1. Write or modify code in any editor (HTML, CSS, JavaScript, or Python).
2. The changes appear instantly in the live preview pane.
3. Use the refresh button if the preview doesn’t update automatically.

6. Code Formatting Tools

Function: Formats and beautifies your code for better readability.

How to Use:

1. Write your code in the editor.
2. Click the "Format" button corresponding to the editor (HTML, CSS, or JavaScript).
3. The code is automatically formatted.

7. Library Integration

Function: Integrates popular CSS frameworks (Bootstrap, Tailwind) and JavaScript libraries (jQuery, React).

How to Use:

1. Select a library from the dropdown menu in the editor.
2. Use the library's classes or functions in your code.
3. The live preview reflects the library’s effects.

8. Lorem Ipsum Generator

Function: Quickly inserts placeholder text into your projects.

How to Use:

1. Click on the Lorem Ipsum Generator tool.
2. Specify the number of paragraphs or words.
3. Paste the generated text into your editor.

9. Settings Customization

Function: Customizes the editor's appearance and functionality.

How to Use:

1. Open the settings menu.
2. Toggle options like Night Mode, Line Numbers, or Word Wrap.
3. Save your preferences for a personalized experience.

10. Download Options

Function: Downloads your code for offline use or sharing.

How to Use:

1. Write your code in the editor.
2. Click the "Download" button.
3. Choose between downloading as an HTML file or a ZIP archive.