@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 281,374 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
Research
The Socket Research Team breaks down a malicious wrapper package that uses obfuscation to harvest credentials and exfiltrate sensitive data.
Research
Security News
Attackers used a malicious npm package typosquatting a popular ESLint plugin to steal sensitive data, execute commands, and exploit developer systems.
Security News
The Ultralytics' PyPI Package was compromised four times in one weekend through GitHub Actions cache poisoning and failure to rotate previously compromised API tokens.