Search
kanbanTodoList
@arfan
@jsxImportSource https://esm.sh/react@18.2.0
HTTP
/** @jsxImportSource https://esm.sh/react@18.2.0 */
import { DragDropContext, Draggable, Droppable } from "https://esm.sh/react-beautiful-dnd@13.1.1";
import { createRoot } from "https://esm.sh/react-dom@18.2.0/client";
import React, { useEffect, useState } from "https://esm.sh/react@18.2.0";
function TaskBoard() {
</div>
function client() {
createRoot(document.getElementById("root")).render(<TaskBoard />);
if (typeof document !== "undefined") {
client();
export default async function server(request: Request): Promise<Response> {
turnitdown
@yawnxyz
HTML to Markdown Converter This is a simple web application that converts HTML to Markdown. It provides a clean and efficient way to transform HTML content into Markdown format, which is widely used for documentation and content creation. Features Easy-to-use Interface : Simple textarea inputs for HTML and Markdown output. Real-time Conversion : Converts HTML to Markdown instantly upon clicking the convert button. Clean Output : Removes scripts, styles, and other non-content elements from the HTML before conversion. Copy to Clipboard : One-click copying of the converted Markdown text. How It Works The application uses the Hono framework to create a simple web server. HTMX is used for handling AJAX requests without writing JavaScript. Alpine.js provides reactivity for the clipboard functionality. The Turndown library is used to convert HTML to Markdown. Usage Paste your HTML content into the "HTML Input" textarea. Click the "Convert to Markdown" button. The converted Markdown will appear in the "Markdown Output" textarea. Use the "Copy to Clipboard" button to easily copy the result. Technical Details The server removes <script> , <style> , and other non-content tags before conversion. HTML comments are also stripped out. The Markdown output is cleaned to remove excessive whitespace and newlines. View Source You can view the source code of this application by clicking the "View Source" link at the bottom of the page. Limitations The converter may not handle extremely complex HTML structures perfectly. Some HTML elements might not have a direct Markdown equivalent. Future Improvements Add options for customizing the Markdown output format. Implement file upload for HTML conversion. Add support for converting Markdown back to HTML. Feel free to use and modify this converter for your HTML to Markdown conversion needs!
HTTP
2. HTMX is used for handling AJAX requests without writing JavaScript.
3. Alpine.js provides reactivity for the clipboard functionality.
4. The Turndown library is used to convert HTML to Markdown.
* This val creates a simple web interface using Hono framework to convert HTML to Markdown.
* It uses HTMX for dynamic updates and Alpine.js for reactivity.
* The Turndown library is used for HTML to Markdown conversion.
* The interface includes two text areas (input and output) and buttons for conversion and copying.
ogImage
@moe
@jsxImportSource https://esm.sh/react
Script
/** @jsxImportSource https://esm.sh/react */
import { render } from "https://deno.land/x/resvg_wasm/mod.ts"
import satori from "npm:satori"
linkInBioTemplate
@vhugoobject
@jsxImportSource https://esm.sh/react
HTTP
/** @jsxImportSource https://esm.sh/react */
import { renderToString } from "npm:react-dom/server";
const itemStyle = {
padding: "10px",
sharpAmberPheasant
@Naruto
@jsxImportSource https://esm.sh/react@18.2.0
HTTP
/** @jsxImportSource https://esm.sh/react@18.2.0 **/
import { renderToString } from "https://esm.sh/react-dom@18.2.0/server";
export default (req: Request) => {
return new Response(
falImageHandler
@isidentical
An interactive, runnable TypeScript val by isidentical
HTTP
import * as fal from "npm:@fal-ai/serverless-client";
fal.config({
// Can also be auto-configured using environment variables:
digitalYellowRoadrunner
@athyuttamre
An interactive, runnable TypeScript val by athyuttamre
Script
state: z.string(),
country: z.string(),
const client = new OpenAI({ apiKey: Deno.env.get("OPENAI_API_KEY") });
async function main() {
const stream = client.beta.chat.completions.stream({
model: "gpt-4o-mini",
messages: [{
chatgptchess
@tmcw
ChatGPT Chess Inspired by all this hubbub about chess weirdness , this val lets you play chess against ChatGPT 4 . Expect some "too many requests" hiccups along the way. ChatGPT gets pretty bad at making valid moves after the first 10 or so
exchanges. This lets it retry up to 5 times to make a valid move, but if it can't, it can't.
HTTP
// do not pick up pieces if the game is over
if (game.isGameOver()) return false
// only pick up pieces for the side to move
if (
(game.turn() === "w" && piece.search(/^b/) !== -1)
depannageInformatique
@vesty91
@jsxImportSource https://esm.sh/react@18.2.0
Script
/** @jsxImportSource https://esm.sh/react@18.2.0 */
import React, { useState, useEffect } from "https://esm.sh/react@18.2.0";
import { createRoot } from "https://esm.sh/react-dom@18.2.0/client";
// SVG illustrations (unchanged)
</div>
function client() {
createRoot(document.getElementById("root")).render(<App />);
if (typeof document !== "undefined") { client(); }
export default async function server(request: Request): Promise<Response> {
CDS_Counter
@toowired
// Define the 5 types of containers acceptable for the Container Deposit Scheme
HTTP
} catch (error) {
console.error('Error sending notification:', error);
// Consider additional error handling
// Implementation of logDetection
async function logDetection(containers) {
} catch (error) {
console.error('Error logging container detections:', error);
// Consider additional error handling, like retrying or sending an alert
linkInBioTemplate
@opeala
@jsxImportSource https://esm.sh/react
HTTP
/** @jsxImportSource https://esm.sh/react */
// import { faCoffee } from "npm:@fortawesome/free-solid-svg-icons";
} from "npm:@fortawesome/free-brands-svg-icons";
import { FontAwesomeIcon } from "npm:@fortawesome/react-fontawesome";
import { renderToString } from "npm:react-dom/server";
export default async function(req: Request) {
EnkakuStatelessHTTPExampleClient
@paul_lecam
An interactive, runnable TypeScript val by paul_lecam
Script
import { Client } from "https://esm.sh/@enkaku/client@0.8";
import { ClientTransport } from "https://esm.sh/@enkaku/http-client-transport@0.8";
const client = new Client({
transport: new ClientTransport({ url: "https://paul_lecam-enkakustatelesshttpexample.web.val.run" }),
const result = await client.request("example:request").toValue();
console.log("request result", result);
await client.sendEvent("example:event", "hello");
purpleMagpie
@stevekrouse
An interactive, runnable TypeScript val by stevekrouse
HTTP
import { httpClient } from "https://esm.town/v/pomdtr/http_client";
export default httpClient((req) => {
return new Response("Hello World!");
bookmarks: [
authenticateReddit
@mschleske
An interactive, runnable TypeScript val by mschleske
Script
export const authenticateReddit = async (
CLIENT_ID,
CLIENT_SECRET,
ACCESS_CODE,
Buffer.from(
`${CLIENT_ID}:${CLIENT_SECRET}`,
).toString("base64")
bookmark
@michaelmang
A minimal bookmarking tool This allows you to bookmark links and view them later. Completely powered by ValTown and SQLite. To set this up for yourself Fork the val From your ValTown settings page, add an environment variable named bookmarks_client_id and give it a value (you will be using this for saving) Add another environment variable named bookmarks_client_secret and give it a value (you will also be using this for saving) At first, the "bookmarks" table will not exist, so we need to save an article first, which will create the "bookmarks" table To do this, add a bookmarklet to your browser with this value (replace BOOKMARKS-CLIENT-ID and BOOKMARKS-CLIENT-SECRET with the values you added to the environment variables, and replace BOOKMARKS-URL with your VAL's URL): javascript:void(open('BOOKMARKS-URL/save?u='+encodeURIComponent(location.href)+'&t='+encodeURIComponent(document.title)+'&id=BOOKMARKS-CLIENT-ID&secret=BOOKMARKS-CLIENT-SECRET', 'Bookmark a link', 'width=400,height=450')) Click this bookmarklet to bookmark the URL of the current active tab Go to your VAL URL homepage to see the bookmark Demo Here are my bookmarks:
https://ramkarthik-bookmark.web.val.run/ Note Make sure you don't share bookmarks_client_id and bookmarks_client_secret . It is used for authentication before saving a bookmark.
HTTP
1. Fork the val
2. From your ValTown settings page, add an environment variable named `bookmarks_client_id` and give it a value (you will be using this for saving)
3. Add another environment variable named `bookmarks_client_secret` and give it a value (you will also be using this for saving)
4. At first, the "bookmarks" table will not exist, so we need to save an article first, which will create the "bookmarks" table
5. To do this, add a bookmarklet to your browser with this value (replace `BOOKMARKS-CLIENT-ID` and `BOOKMARKS-CLIENT-SECRET` with the values you added to the environment variables, and replace `BOOKMARKS-URL` with your VAL's URL):
javascript:void(open('BOOKMARKS-URL/save?u='+encodeURIComponent(location.href)+'&t='+encodeURIComponent(document.title)+'&id=BOOKMARKS-CLIENT-ID&secret=BOOKMARKS-CLIENT-SECRET', 'Bookmark a link', 'width=400,height=450'))
6. Click this bookmarklet to bookmark the URL of the current active tab
### Note
Make sure you don't share `bookmarks_client_id` and `bookmarks_client_secret`. It is used for authentication before saving a bookmark.
return c.text("Authentication details (ID/Secret) missing!");
if (id != Deno.env.get("bookmarks_client_id") || secret != Deno.env.get("bookmarks_client_secret")) {
return c.text("Unauthorized!");