Hello, Demo!

Forms and Input Elements

Text Inputs

Textarea and Select

Checkboxes and Radio Buttons



Buttons

HTML Elements

Headings

Heading 1

Heading 2

Heading 3

Heading 4

Text Formatting

This is bold text and this is italic text. Here's some strikethrough text and some inline code.

Lists

Unordered List

Ordered List

  1. First ordered item
  2. Second ordered item
    1. Nested ordered item
    2. Another nested item
  3. Third ordered item

Links and Images

This is a link

Alt text for image

Blockquotes

“The only limit to our realization of tomorrow is our doubts of today.”

— Attribution

“The only limit to our realization of tomorrow is our doubts of today.”

A sub quote

  • Another sub item

— Attribution

Code Blocks

// JavaScript code block
function greetUser(name) {
  console.log(`Hello, ${name}!`);
}
 
greetUser('World');
# Python code block
def factorial(n):
    if n <= 1:
        return 1
    return n * factorial(n - 1)
 
print(factorial(5))
This is some content in a code block without a set language

Tables

Column 1Column 2Column 3
Row 1Data 1Value 1
Row 2Data 2Value 2
Row 3Data 3Value 3

HTML Elements

This is a paragraph with strong text, emphasized text, and underlined text.

Note: This is a highlighted div element.

Click to expand

This content is hidden by default and shows when expanded.

Definition Term
Definition description
Another Term
Another description

Media Elements

Interactive Elements

Putting the input inside a label is better because you don't need to set the for attribute.

Fieldset Legend

Component Integration

Counter:

TODO

Once I have this, I will completely separate the argentic code, from the code that streams to the client

One function will generate a response in the agentic loop, returns a async iterable that lasts throughout all the iterations and is streamed by the api endpoint that simply streams the data streight to the user

import OpenAI from "npm:openai";
 
function initStream<T>(stream: AsyncIterable<T>, controller: AbortController){
    const chunks: T[] = [];
    let resolve: (chunk: T) => void = () => {};
    let nextChunk = new Promise<T>(r => resolve = r);
    
    controller.signal.throwIfAborted();
    controller.signal.addEventListener('abort', () => resolve(null as T));
    
    (async () => {
        for await (const chunk of stream){
            resolve(chunk);
            nextChunk = new Promise<T>(r => resolve = r);
            chunks.push(chunk);
        }
        controller.abort();
        resolve(null as T);
    })();
 
    return async function*() {
        for (const chunk of chunks) yield chunk;
        
        while(true){
            const chunk = await nextChunk;
            if(controller.signal.aborted)return;
            yield chunk;
        }
    };
}
 
const openai = new OpenAI();
const controller = new AbortController();
const stream = await openai.chat.completions.create(
    {
        stream: true,
        model: "chatgpt-4o-latest", 
        messages: [{role: "user", content: "hello"}],
        
    },
    {signal: controller.signal}
);
 
const iterable = initStream(stream, controller);
 
 
for await (const chunk of iterable()){
    console.log(chunk);
}

Design notes

Additional Markdown Features

Task Lists

Horizontal Rules

Above this line

Below this line

Footnotes

Here's a sentence with a footnote1.

More Content

This is some more content! a note here2

Abbreviations

*[HTML]: Hyper Text Markup Language
*[MDX]: Markdown for the component era

The HTML and MDX specifications are important for web development.

This demo page showcases various HTML elements, form components, and markdown features for testing and reference purposes.

Footnotes

  1. This is the footnote content. ↩

  2. More content. ↩