explaingit

denoland/fresh

13,755TypeScriptAudience · developerComplexity · 3/5Setup · easy

TLDR

Fresh is a Deno web framework that sends no JavaScript to the browser by default, rendering pages on the server for fast load times and only shipping interactivity where you explicitly mark it.

Mindmap

mindmap
  root((Fresh))
    What it does
      Server rendering
      Islands interactivity
      File-based routing
    Tech Stack
      TypeScript
      Deno
    Deployment
      Deno Deploy
      GitHub connect
    Audience
      Web developers
      TypeScript devs
Click or tap to explore — scroll the page freely

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

Things people build with this

USE CASE 1

Build a fast-loading website that sends plain HTML by default with JavaScript only on specifically marked interactive elements.

USE CASE 2

Create a TypeScript web app with file-based routing and no build configuration step.

USE CASE 3

Deploy a web project to Deno Deploy by connecting a GitHub repository with no additional config files.

USE CASE 4

Add interactive widgets to a server-rendered page using Fresh islands without shipping unnecessary JavaScript.

Tech stack

TypeScriptDeno

Getting it running

Difficulty · easy Time to first run · 5min

Requires Deno installed, production deployment targets Deno Deploy exclusively via GitHub repo connection.

In plain English

Fresh is a web framework built by the team behind Deno, a runtime for JavaScript and TypeScript code. A framework in this context is a collection of tools and conventions that handle the repetitive parts of building websites so you can focus on your own content and logic. Fresh supports TypeScript out of the box, which is a version of JavaScript that adds type checking to help catch mistakes before your code runs. The main idea behind Fresh is that it sends no JavaScript to visitors' browsers by default. Most modern web frameworks include a large amount of JavaScript that the browser has to download and process before the page becomes usable. Fresh instead renders pages on the server and sends plain HTML, which loads faster. When you need an interactive element, you mark that piece of the page as an island, and only that island's code gets sent to the browser. The rest stays purely server-rendered. Routing, which determines which page a web address maps to, follows the file system. If you create a file in a certain folder, Fresh treats its name as the web address, similar to how Next.js works. This avoids writing a separate list of routes by hand. Starting a project takes a few shell commands: install Deno, run the init script, and start the development server. Changes to your source code appear in the browser right away. Deploying to the public internet is done through Deno Deploy, the company's hosting service. You push your project to GitHub, create a Deno Deploy project, connect the repository, and it publishes automatically with no configuration. The README also covers how to contribute to the project, how to add your own site to a public showcase of Fresh-built pages, and badge images and hashtags for social media.

Copy-paste prompts

Prompt 1
Walk me through creating a new Fresh project, adding a form route that handles a POST submission server-side, and deploying it to Deno Deploy.
Prompt 2
Show me how to create a Fresh island component that fetches live data from an API every 5 seconds and updates the page without a full reload.
Prompt 3
How does Fresh's file-based routing work? Give me an example with a dynamic route like /blog/[slug].tsx that reads from a data source.
Prompt 4
I want to add Tailwind CSS to a Fresh project. How do I configure it and what gotchas should I watch out for?
Prompt 5
Compare Fresh's islands architecture to Next.js Server Components, when would I choose Fresh over Next.js for a new project?
Open on GitHub → Explain another repo

← denoland on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.