--- title: Quickstart description: Get started with Jaspr and build your first website in Dart. --- --- Welcome to the Jaspr Getting Started guide. In it, you'll install Jaspr, set up a new project and learn the basics of Jaspr. ## 1. Install Jaspr You can install Jaspr either through our **VSCode Extension** or by installing the **Jaspr CLI** in the terminal. The CLI lets you manage the project from the command line, while the extension provides a more integrated experience within your IDE. - Use the Jaspr VSCode Extension to set up and serve your website with full debugging support from inside VSCode. - Use the Jaspr CLI to set up and serve your website from the command line. Install the Jaspr VSCode extension by searching for `Jaspr` in the extensions menu. After installing and activating the extension, you will get a prompt to install the Jaspr CLI. Accept it to continue. Install the Jaspr CLI via: ```shell dart pub global activate jaspr_cli ``` The `jaspr` command will be available in your terminal. ## 2. Choose a Rendering Mode The first thing to do when starting a new project with Jaspr is to decide on a **Rendering Mode** to use. The rendering mode defines how your website is executed and built and each one has its own advantages and disadvantages based on what you want to build. Jaspr supports these three rendering modes: In static mode Jaspr performs **static rendering** (also known as Static Site Generation) at build time, generating a fully static site that you can deploy anywhere. **Recommended for most websites, landing pages, portfolios, blogs, documentation sites, etc.** In server mode Jaspr builds a **server application** that pre-renders your components for each incoming request (also known as Server Side Rendering). **Recommended for web applications that require backend integration, user authentication, or dynamic content that changes frequently.** If you want, you can skip the server and pre-rendering part of Jaspr completely and use it as a client-side only framework. All modes support client-side interactivity and can be used to build interactive web applications. The main difference is when and how the initial HTML is generated. Read more about rendering modes [here](dev/modes). ## 3. Create your Project To create a new Jaspr project, open the command palette (`Ctrl+Shift+P`) and select **Jaspr: New Project**. You are asked to choose from several templates and set a project folder. ![New Project](https://github.com/schultek/jaspr/blob/main/modules/jaspr-code/media/screenshots/new_project.png?raw=true) The first three templates are the default choices for each rendering mode: static, server and client. The fourth option includes an embedded Flutter web app and the fifth comes with a custom backend setup using `shelf`. Choosing a template will not lock you into a specific configuration. Starting from one template you can easily modify your code to behave as any other template along the way. To create a new project run: ```shell jaspr create my_website ``` This will walk you through the setup wizard and create a new Jaspr project inside the `my_website` folder. The cli will prompt you with a set of options to configure your project. You can read about what each option does [here](dev/cli#creating-a-new-project) or just start with the recommended ones (simply press **Enter** each time). Alternatively, you can select a pre-made template using the `--template` option. Choosing a set of options do not lock you into a specific configuration. Starting from one setup you can easily modify your code to behave as any other setup along the way. ## 4. Run your Project To run and debug a Jaspr application, launch it using F5 or the Debug menu. The extension will start the debug process and attach the Dart debugger to it. --- When developing a Jaspr project in `static` or `server` mode, this will open **two** separate debugging sessions, one for the server and one for the client. Switch between the two using the debugging sidebar or process dropdown. | Sidebar | Dropdown | |---|---| | ![Sidebar](https://github.com/schultek/jaspr/blob/main/modules/jaspr-code/media/screenshots/sidebar.png?raw=true) | ![Dropdown](https://github.com/schultek/jaspr/blob/main/modules/jaspr-code/media/screenshots/dropdown.png?raw=true) Both processes will be managed by the main Jaspr terminal. ![Terminal](https://github.com/schultek/jaspr/blob/main/modules/jaspr-code/media/screenshots/terminal.png?raw=true) To stop the server, click "Stop Jaspr" in the status bar, or focus the terminal and press `Ctrl+C`. This will stop both debugging sessions and the main process. You can also detach the debugging sessions individually using the detach button in the debug bar, but this will keep the app running. Start the development server via: ```shell cd my_website jaspr serve ``` This will spin up a development server at `localhost:8080`. You can now start developing your website. 🎉 Observe that the browser automatically refreshes the page when you change something in your code, like the `Welcome` text. ### Using AI with Jaspr To get the most out of AI coding tools like Claude, Cursor, or Antigravity when working with Jaspr, we recommend installing our **[Agent Skills](https://agentskills.io/)**. These are structured instruction files that teach AI coding agents how to work with Jaspr effectively, including up-to-date syntax, best practices, and common patterns. You can install them to your project using the `jaspr install-skills` command. ```shell jaspr install-skills ``` Read more about using AI with Jaspr [here](dev/ai). ## 5. Next Steps Check out the following resources to continue your journey with Jaspr: - [Server-Side Jaspr](dev/server): Learn about server-side rendering, component scopes and everything server-side in Jaspr. *Relevant for static and server mode.* - [Client-Side Jaspr](dev/client): Learn about hydration, interactivity, DOM and everything client-side in Jaspr. *Relevant for all modes.* - [Static Sites](dev/static_sites): Learn about static site generation in Jaspr. *Relevant for static mode.*