Online TypeScript Editor/Compiler By FSIBLOG

Online TypeScript Compiler

Write HTML, CSS, and TypeScript code and see the results instantly!

User ID:

Code Editor

HTML

<div class="container">
    <h2>Hello from HTML!</h2>
    <p>This is a live preview of your HTML, CSS, and TypeScript code.</p>
    <button onclick="greet()">Click me!</button>
</div>

CSS

.container {
    border: 2px solid #d4d4d4;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
button {
    background-color: #000000;
    color: #ffffff;
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 0.5rem;
    cursor: pointer;
    font-size: 1rem;
    transition: background-color 0.3s ease, transform 0.1s ease;
    margin-top: 1rem;
}
button:hover {
    background-color: #1f2937;
    transform: translateY(-2px);
}

TypeScript

function greet(): void {
    const heading: HTMLElement | null = document.querySelector(‘h2’);
    if (heading) {
        heading.textContent = ‘Button Clicked!’;
    }
}
document.addEventListener(‘DOMContentLoaded’, (): void => {
    const heading: HTMLElement | null = document.querySelector(‘h2’);
    if (heading) {
        heading.textContent = ‘Welcome to the TypeScript Compiler!’;
    }
});

Output & Preview

HTML/CSS/TypeScript Output (Live Preview)

`; const blob = new Blob([combinedHtml], { type: 'text/html' }); const url = URL.createObjectURL(blob); const iframe = document.getElementById('output-iframe'); iframe.src = url;// Clean up previous blob URL to prevent memory leaks if (iframe.dataset.previousUrl) { URL.revokeObjectURL(iframe.dataset.previousUrl); } iframe.dataset.previousUrl = url;saveCode(); }// Initialize document.getElementById('run-button').addEventListener('click', runCode); initializeFirebase();

Test Code (Try This Code For Testing):

HTML

<div class="container">
    <h2>Counter App</h2>
    <p>Current Count: <span id="count">0</span></p>
    <button onclick="increment()">Increment</button>
    <button onclick="decrement()">Decrement</button>
</div>

CSS

.container {
    padding: 2rem;
    border: 2px solid #d4d4d4;
    border-radius: 0.5rem;
    background-color: #f9fafb;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    text-align: center;
}

h2 {
    color: #1f2937;
    margin-bottom: 1rem;
}

p {
    font-size: 1.125rem;
    color: #4b5563;
    margin-bottom: 1.5rem;
}

button {
    background-color: #000000;
    color: #ffffff;
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 0.5rem;
    cursor: pointer;
    font-size: 1rem;
    margin: 0 0.5rem;
    transition: background-color 0.3s ease, transform 0.1s ease;
}

button:hover {
    background-color: #1f2937;
    transform: translateY(-2px);
}

TypeScript

let count: number = 0;
const countDisplay: HTMLElement | null = document.getElementById('count');

function updateDisplay(): void {
    if (countDisplay) {
        countDisplay.textContent = count.toString();
    }
}

function increment(): void {
    count++;
    updateDisplay();
}

function decrement(): void {
    count--;
    updateDisplay();
}

document.addEventListener('DOMContentLoaded', (): void => {
    updateDisplay();
});