Search results for "react client side"

codemirror_demo

@pomdtr

CodeMirror Web Component Available Attributes language readonly code theme API You can access the code using the code property: document.getElementById("editor").code

3

4

HTTP

# CodeMirror Web Component

## Available Attributes

- language

- readonly

- code

- [theme](https://github.com/vadimdemedes/thememirror/tree/main/source/themes)

const body = `<html>

<head>

<script

type="module"

valle_tmp_0795929485980921815770770417569246

@janpaul123

// This script will respond with a basic HTML page instead of plain text using the built-in Response class in TypeScript.

0

HTTP

// This script will respond with a basic HTML page instead of plain text using the built-in Response class in TypeScript.

* HTTP Val: Hello World Example (HTML Response)

* This script will respond with a basic HTML page that says "Hello world" to any incoming HTTP request.

export default async function(req: Request): Promise<Response> {

const htmlContent = `

<!DOCTYPE html>

<head>

key_value_api

@brianleroux

An interactive, runnable TypeScript val by brianleroux

1

0

HTTP

await sqlite.execute(`create table if not exists kv(

key text unique,

value text

const app = new Hono();

app.get("/", async (c) => {

let res = await sqlite.execute(`select key, value from kv`);

return c.json(res);

app.post("/", async function(c) {

let res = await sqlite.execute({

sql: `insert into kv(key, value) values (:key, :value)`,

ofStyle

@tmcw

An interactive, runnable TypeScript val by tmcw

3

0

Script

export const ofStyle = `:root {

--main-bg-color: #faf7f4;

--active-bg-color: #f0ede9;

--main-text-color: #333;

--hover-text-color: #111;

--secondary-text-color: #888;

@media (prefers-color-scheme: dark) {

:root {

--main-bg-color: #2e2e2e;

--active-bg-color: #444;

whoIsHiringLayout

@vawogbemi

@jsxImportSource npm:hono@3/jsx

0

Script

/** @jsxImportSource npm:hono@3/jsx */

const tabs = { "/": "Home", "/about": "About" }; // { "/": "Home", "/browse": "Browse", "/faq": "FAQ" };

export default function({ activeTab, children }: PropsWithChildren<{ activeTab: string }>) {

return (

<html>

<head>

<title>Who's Hiring</title>

</head>

valle_tmp_46416418603901899924834629081321

@janpaul123

// This val responds to HTTP requests with "Hello, World!"

0

HTTP

// This val responds to HTTP requests with "Hello, World!"

export default async function main(req: Request): Promise<Response> {

return new Response("Hello, World!");

up

@todepond

An interactive, runnable TypeScript val by todepond

0

HTTP

export default async function(req: Request): Promise<Response> {

const name = ((req.url.split("?")[1] ?? "").split("=")[0] ?? "").split("/")[0];

console.log(req.url);

let response;

try {

response = await blob.get("labUpload" + name);

} catch (e) {

return new Response(null, { status: 404 });

if (!response.ok) {

return new Response(response.body, { status: 404 });

textToImagePlayground

@iamseeley

🖼️ text to image playground using fal.ai model apis

0

HTTP

## 🖼️ text to image playground using [fal.ai](https://fal.ai) model apis

const htmlContent = `

<!DOCTYPE html>

<head>

<title>Image Generator</title>

<style>

${formStyles}

valshot

@burningion

Val Shot Generate val source code screenshot using sourcecodeshots.com ⚠️ This service is offered for personal use under a reasonable usage policy as stated here: https://sourcecodeshots.com/docs 📣 Special thanks to @pomdtr for their help and contributions! Usage https://vladimyr-valshot.web.val.run/v/<author>/<val> Example https://vladimyr-valshot.web.val.run/v/vladimyr/valshot https://vladimyr-valshot.web.val.run/v/pomdtr/readme

0

HTTP

# Val Shot

[![](https://vladimyr-licensebadge.web.val.run/v/vladimyr/valshot)](https://spdx.org/licenses/0BSD.html)

Generate val source code screenshot using [sourcecodeshots.com](https://sourcecodeshots.com)

⚠️ This service is offered for personal use under a reasonable usage policy as stated here: https://sourcecodeshots.com/docs

📣 Special thanks to @pomdtr for their help and contributions!

## Usage

// SPDX-License-Identifier: 0BSD

const router = new Hono();

// router.get("/", toHonoHandler(serveReadme(import.meta.url)));

router.get("/", async (c) => {

webhook1

@csshsh

An interactive, runnable TypeScript val by csshsh

0

Script

import { fetchRSS } from "https://esm.town/v/stevekrouse/fetchRSS?v=12";

export let webhook1 = async (a) => {

const response = await fetchRSS(a);

return "asd";

FetchBasic

@hunty

Framer Fetch: Basic A basic example of an API endpoint to use with Framer Fetch.

1 3

0

HTTP

# Framer Fetch: Basic

A basic example of an API endpoint to use with Framer Fetch.

export default async function(req: Request): Promise<Response> {

// Setup CORS Headers

const headers = new Headers();

headers.set("Access-Control-Allow-Origin", "*");

headers.set("Access-Control-Allow-Methods", "GET, PUT, DELETE, OPTIONS");

headers.set("Access-Control-Allow-Headers", "Content-Type");

// Pick a random greeting

const greetings = ["Hello!", "Welcome!", "Hi!", "Heya!", "Hoi!"];

valle_tmp_2350503646544852617117329959463667

@janpaul123

// This val responds with an HTML greeting of "Hello world"

0

HTTP

// This val responds with an HTML greeting of "Hello world"

export default async function(req: Request): Promise<Response> {

const htmlResponse = "<h1>Hello world</h1>";

return new Response(htmlResponse, {

headers: { "Content-Type": "text/html" },

valle_tmp_328293536271528244631103783931838

@janpaul123

// This val retrieves the weather in Brooklyn, NY using the MetaWeather API

0

HTTP

// This val retrieves the weather in Brooklyn, NY using the MetaWeather API

export default async function main(req: Request): Promise<Response> {

const response = await fetch("https://www.metaweather.com/api/location/2459115/");

const weatherData = await response.json();

return new Response(JSON.stringify(weatherData), {

headers: { "Content-Type": "application/json" },

valshot

@vladimyr

Val Shot Generate val source code screenshot using sourcecodeshots.com ⚠️ This service is offered for personal use under a reasonable usage policy as stated here: https://sourcecodeshots.com/docs 📣 Special thanks to @pomdtr for their help and contributions! Usage https://vladimyr-valshot.web.val.run/v/<author>/<val> Example https://vladimyr-valshot.web.val.run/v/vladimyr/valshot https://vladimyr-valshot.web.val.run/v/pomdtr/readme

2 7

11

HTTP

# Val Shot

[![](https://vladimyr-licensebadge.web.val.run/v/vladimyr/valshot)](https://spdx.org/licenses/0BSD.html)

Generate val source code screenshot using [sourcecodeshots.com](https://sourcecodeshots.com)

⚠️ This service is offered for personal use under a reasonable usage policy as stated here: https://sourcecodeshots.com/docs

📣 Special thanks to @pomdtr for their help and contributions!

## Usage

// SPDX-License-Identifier: 0BSD

const router = new Hono();

router.get("/", toHonoHandler(serveReadme(import.meta.url)));

router.get("/v/:author/:name", async (c) => {

val_hhGpnm1tf9

@dhvanil

An interactive, runnable TypeScript val by dhvanil

0

HTTP

export async function val_hhGpnm1tf9(req) {

try {

// Execute the code directly and capture its result

const result = await (async () => {

function generateAllProblems() {

const arrayProblems = [

"Implement a function to find the missing number in an array of 1 to N",

"Write a function to rotate an array by k positions",

"Create a function to merge two sorted arrays",

"Implement a function to find the longest increasing subsequence",