@hotwired/turbo
Advanced tools
The speed of a single-page web application without having to write any JavaScript
@hotwired/turbo is a JavaScript framework that provides a set of tools to build modern web applications with minimal JavaScript. It focuses on enhancing the speed and responsiveness of web applications by handling navigation, form submissions, and more, without requiring a full page reload.
Turbo Drive
Turbo Drive makes navigation faster by using AJAX to load new pages, replacing the body, and updating the history without a full page reload.
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/@hotwired/turbo@7.1.0/dist/turbo.min.js"></script>
</head>
<body>
<a href="/next_page">Next Page</a>
</body>
</html>Turbo Frames
Turbo Frames allow you to update parts of a page without a full reload. Clicking the link inside the frame will only update the content of that frame.
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/@hotwired/turbo@7.1.0/dist/turbo.min.js"></script>
</head>
<body>
<turbo-frame id="frame">
<a href="/next_content">Load Content</a>
</turbo-frame>
</body>
</html>Turbo Streams
Turbo Streams enable real-time updates to parts of the page by sending HTML fragments over WebSockets or other channels. The example appends a new message to the target element with id 'messages'.
<turbo-stream action="append" target="messages">
<template>
<div id="message_1">Hello, World!</div>
</template>
</turbo-stream>Turbo Native
Turbo Native allows you to use Turbo in native mobile applications, providing a seamless experience between web and mobile. The example shows how to navigate to a URL in a Turbo-enabled Android app.
// In a native mobile app
import { Turbo } from '@hotwired/turbo-android'
Turbo.visit("https://example.com")pjax is a jQuery plugin that uses AJAX to load content and push the URL state, similar to Turbo Drive. However, it requires jQuery and is less feature-rich compared to @hotwired/turbo.
Unpoly is a framework for creating fast and flexible web applications. It offers similar functionality to Turbo Frames and Turbo Streams, but with a different API and additional features like layer management.
Stimulus is a modest JavaScript framework for enhancing static HTML. While it doesn't directly compete with Turbo, it complements it by providing a way to add behavior to HTML elements. Both are part of the Hotwire suite.
Turbo uses complementary techniques to dramatically reduce the amount of custom JavaScript that most web applications will need to write:
It's all done by sending HTML over the wire. And for those instances when that's not enough, you can reach for the other side of Hotwire, and finish the job with Stimulus.
Read more on turbo.hotwired.dev.
Please read CONTRIBUTING.md.
© 2024 37signals LLC.
FAQs
The speed of a single-page web application without having to write any JavaScript
The npm package @hotwired/turbo receives a total of 174,334 weekly downloads. As such, @hotwired/turbo popularity was classified as popular.
We found that @hotwired/turbo demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 4 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
pnpm 10 blocks lifecycle scripts by default to improve security, addressing supply chain attack risks but sparking debate over compatibility and workflow changes.
Product
Socket now supports uv.lock files to ensure consistent, secure dependency resolution for Python projects and enhance supply chain security.
Research
Security News
Socket researchers have discovered multiple malicious npm packages targeting Solana private keys, abusing Gmail to exfiltrate the data and drain Solana wallets.