Create a html response with JSX.

Related tags

Learning resource html
Overview

Htm

Create a text/html response with JSX, powered by Preact and UnoCSS.

Usage

To use Htm, create a server.tsx file like this:

/** @jsx h  */
import { serve } from "https://deno.land/[email protected]/http/server.ts";
import { h, html } from "https://deno.land/x/htm/mod.tsx";

serve((res) =>
  html({
    title: "Hello World!",
    meta: {
      description: "This is a description.",
    },
    body: (
      <div class="flex items-center justify-center w-screen h-screen">
        <p class="text-5xl font-bold text-green-600">Hello World!</p>
      </div>
    ),
  })
);

Run the server

deno run --allow-net server.tsx

Try it online

https://dash.deno.com/playground/hello-world-jsx

You might also like...

Modify Request & Response Headers Chrome Extension (Manifest V3)

Modify Request & Response Headers Chrome Extension (Manifest V3)

Modify request & response headers (Chrome Extension Manifest V3) This Chrome extension will add request header and response header to few network requ

Dec 9, 2022

Web Components engine based on JSX & TypeScript

Web Components engine based on JSX & TypeScript

WebCell Web Components engine based on JSX & TypeScript Usage Demo & GitHub template: https://web-cell.dev/scaffold/ Project bootstrap Command npm ini

Nov 17, 2022

High performance JSX web views for S.js applications

High performance JSX web views for S.js applications

Surplus const name = S.data("world"), view = h1Hello {name()}!/h1; document.body.appendChild(view); Surplus is a compiler and runtime to all

Dec 30, 2022

Like JSX, but native and fast

Like JSX, but native and fast

esx High throughput React Server Side Rendering For a simplified example of esx in action, check out esx-demo. esx is designed to be a high speed SSR

Jan 2, 2023

✏️ Super lightweight JSX syntax highlighter, around 1KB after minified and gzipped

✏️ Super lightweight JSX syntax highlighter, around 1KB after minified and gzipped

Sugar High Introduction Super lightweight JSX syntax highlighter, around 1KB after minified and gzipped Usage npm install --save sugar-high import { h

Dec 8, 2022

Add the `className` to all JSX elements in your project

Babel Plugin Transform JSX Classes This babel plugin adds the className in each JSX element. Before After function FancyComponent () { return (

Jul 15, 2022

Unofficial Library for using Discord.JS with JSX Syntax.

@chooks22/discord.jsx WARNING! This project is in very early stage of development. And while I do have plans to finish it to completion, consider this

Nov 14, 2022

Use jsx to make scriptable's layout.

scriptable-jsx This project helps you to write Scriptable widgets with JSX syntax. And add some useful tools by the way. you can check demos in demo f

Oct 10, 2022

🖼️ Tiny JSX helper function for high-DPI (Retina Display) images.

🖼️ Tiny JSX helper function for high-DPI (Retina Display) images.

img-srcx Tiny JSX helper function for high-DPI (Retina Display) images. 394 bytes minified and gzipped for ESM (830 bytes for ES5). Installation npm i

Oct 6, 2022
Comments
  • are UnoCSS and Dark mode really necessary??

    are UnoCSS and Dark mode really necessary??

    Hello!

    So I noticed that there are many things now in html that are kinda undocumented. I'm sorry I'm creating an issue but you didn't enable Discussions so...

    First there is unocss. I hoped that all the package would do is convert JSX to html without other things. It may be a good thing to disable unocss by default or perhaps adding a middleware system or perhaps users could do it themselves if they want unocss. I don't really believe unocss is necessary.

    Secondly, there is the dark theme thing. It's a good idea to provide the dark param in the config, but it isn't a good idea to run a script that autodetects the current theme and set it. I think that should be opt in too.

    In short, here is what I meant:

    • Remove UnoCSS or provide option to enable/disable it.
    • Remove the scripts that checks/sets localstorage about dark mode or give option to disable it.

    Thanks.

    opened by vixalien 3
  • Dark support can't be disabled by setting `dark: false`

    Dark support can't be disabled by setting `dark: false`

    Title is enough.

    Related: #4

    Might get fixed by modifying:

    https://github.com/ije/html/blob/8028de5e9dc9e08aec698b806a952a93a7b7f100/mod.tsx#L114-L119

    opened by roj1512 0
  • Fix CSS Reset issues

    Fix CSS Reset issues

    By default, html will include a CSS reset that has a weird rule that makes links unusable. Also provided an option to remove the CSS altogether. It would be nice if the reset CSS would be removed entirely or atleast disabled by default.

    Linked issues:

    • ije/html#1
    • denoland/deno_blog#23
    opened by vixalien 0
  • Reset CSS breaks lists

    Reset CSS breaks lists

    The included reset css changes list-style to none for lists, effectively removing the bullets. If possible, add option to disable reset CSS.

    Actual:

    image

    Expected:

    image

    opened by vixalien 0
Owner
X.
...a man is always a prey to his truths...
X.
GitHub
A tool to check for response status codes with ease

About Archer Archer is an cross-platform tool developed using Nodejs which focuses on the reconnaissance phase of a penetration test. Got a bunch of l

Umair 14 Oct 19, 2022
Ping.js is a small and simple Javascript library for the browser to "ping" response times to web servers in Javascript

Ping.js Ping.js is a small and simple Javascript library for the browser to "ping" response times to web servers in Javascript! This is useful for whe

Alfred Gutierrez 353 Dec 27, 2022
Room impulse response measurement in the browser.

Room impulse response measurement - in the browser! Check it out on danielrudrich.github.io/Broom. Behind the scenes Broom uses the WebAudioAPI to pla

Daniel Rudrich 47 Sep 13, 2022
A plugin for Strapi Headless CMS that provides the ability to transform the API request or response.

strapi-plugin-transformer A plugin for Strapi that provides the ability to transform the API request and/or response. Requirements The installation re

daedalus 71 Jan 6, 2023
Uptime monitoring RESTful API server that allows authenticated users to monitor URLs, and get detailed uptime reports about their availability, average response time, and total uptime/downtime.

Uptime Monitoring API Uptime monitoring RESTful API server that allows authenticated users to monitor URLs, and get detailed uptime reports about thei

Mohamed Magdi 2 Jun 14, 2022
a vscode extension for http response data auto transform ts type.

Api2ts 这是一个自动将 http 的响应数据转化为 ts 的类型，使用 json-to-ts 做的。 Features 框选配置项后，使用快捷键 alt+Q : 请求参数配置文件 在根目录下创建 Api2ts.config.json 文件，配置项如下： { "baseURL": "http

phy-lei 6 Jun 30, 2022
Pfapi plugin uses local and redis caches to achieve single digit milliseconds on average api response time.

Strapi plugin pfapi Pfapi plugin provides configurable, secure and fast API services. APIs are configurable through the admin panel with components an

null 5 Sep 17, 2022
A jQuery plugin to submit forms with files via AJAX and to get a response with errors.

jquery-ajaxform A jQuery plugin to submit form with files via AJAX and to get a response with errors. Browsers without FormData uses iframe transport

gozoro 2 Mar 30, 2021
A fast and powerful http toolkit that take a list of domains to find active domains and other information such as status-code, title, response-time , server, content-type and many other

HTTPFY curently in beta so you may see problems. Please open a Issue on GitHub and report them! A Incredible fast and Powerful HTTP toolkit Report Bug

DevXprite 44 Dec 22, 2022
Improve Response Time 10X by Introducing an Interceptor In NestJS

Improve response times 10x by introducing an interceptor in NestJS This sample project demonstrates the usage of interceptors for improving response t

Dmitry Khorev 1 Oct 28, 2022