Visual editing on an infinite canvas
Work on an infinite canvas while editing live React components, with the code base remaining the source of truth.
Onlook
Freemium
Onlook はデザイナーとプロダクトチーム向けのビジュアルコードエディターで、React のライブ編集、AI 支援の変更、セルフホスティングに対応します。
Onlookとは？
Onlook is a visual code editor for designers and product teams who want to work directly in a real codebase. It combines a canvas-based editing experience with code-first output, so the project’s code stays the source of truth while teams design, prototype, and iterate.
The site positions Onlook around live React components, an infinite canvas, and AI-assisted editing. It also emphasizes team use, real design systems such as Storybook, and open-source availability, with a hosted option available through the company’s sales flow.
Onlookでできること
AI-assisted changes
Use chat to modify selected elements and generate code assistance directly in the editing workflow.
Team collaboration
Collaborate with teammates in real time and keep work aligned to the same underlying product code.
Design system alignment
Bring in your team’s real design system, including Storybook-based components, so new work matches existing patterns.
Branching and version control
Manage branches and version history so teams can organize work and review changes across projects.
Code ownership and export options
Export work locally, publish it to GitHub, or host it at a link, with open-source access for teams that want to customize the tool.
利用シーン
“Website and prototype creation”
Create websites and prototypes directly in a real codebase when the design needs to reflect implementable product work instead of disconnected mockups.
“Component-level iteration”
Use the canvas and chat workflow to iterate on live React components while keeping implementation details visible as you work.
“Design-system-driven collaboration”
Bring a shared design system into the editor so teams can reuse established components and keep new work consistent with existing UI patterns.
“Team workflow and versioned editing”
Use branching, version history, and collaboration features to review changes with teammates and manage parallel work on the same project.
“Self-hosted and code-owned delivery”
Self-host the open-source product or export work to a local machine, GitHub, or a hosted link when you need ownership over the code.
よくある質問
What is Onlook?
Onlook is an open-source visual editor for websites. The source describes it as a way for teams to create and style prototypes and websites without needing coding knowledge, while still working from code as the source of truth.
What can I use Onlook for?
The source says you can use Onlook to create websites, prototypes, user interfaces, and other visual work such as presentations and mockups. It is positioned around designing directly in real codebases.
Is there a free version of Onlook?
Yes. Onlook can be self-hosted for free on GitHub. For the hosted cloud version, the site asks users to contact the team or book a demo.
How do I use Onlook?
Onlook says you can design on an infinite canvas, select individual elements, and use chat to modify them. The product emphasizes that the code remains the source of truth throughout the workflow.
What pricing options does Onlook offer?
The pricing page lists a free Starter tier for individuals and small teams, and a Teams option with custom pricing. It also says existing paid plan users can continue using Onlook.
クイック情報
- Category
- Visual code editor
- Primary users
- Designers, product teams, and developers
- Platform
- Web
- Source domain
- onlook.com
- Pricing
- Free self-hosted option; Teams uses custom pricing
- Workflow
- Infinite canvas, element selection, and chat-driven edits
Onlook のトラフィック分析
トラフィックデータは参考情報としてご利用ください。
- 月間訪問数
- 15.9K
- 世界ランキング
- #1,565,492
- 直帰率
- 37.1%
- 平均滞在時間
- 00:56
- 訪問あたりのページ数
- 1.97
- ドメイン評価
- 58
トラフィック推移
| 5月 | 17983 |
|---|---|
| 6月 | 11624 |
| 7月 | 15893 |
トラフィックソース
トラフィック分析データはまだありません。
主な地域
不明34.1%
不明12.4%
不明11.5%
不明10.2%
不明8.5%
不明23.3%
Onlookの代替品
Aperture
github.com
An AI code editor that plans changes, stages diffs, and checks them before application.
AutonomyAI
autonomyai.io
AutonomyAI is an AI-native product delivery platform that helps product managers and designers turn ideas into production-ready code changes in their existing codebase. Engineers review and approve the resulting pull requests before merge.
Heym
heym.run
Heymは、ソースコードを利用できるセルフホスト型のAIワークフロー自動化プラットフォームです。ビジュアルエディターでエージェント型ワークフローを構築・実行でき、自社管理のインフラ上でエージェント、RAG、承認、実行トレースをオーケストレーションできます。
Polygres
polygres.com
Polygresは、グラフ探索、ベクトル検索、ハイブリッド検索を1つのシステムに統合した、PostgreSQLベースのエージェントワークフロー向けプラットフォームです。セルフホストまたはマネージドクラウドで運用でき、ライブデータベースの行をAIエージェントが検索できるコンテキストに変換します。
Zed
zed.dev
macOS、Linux、Windowsに対応した、高性能なマルチプレイヤーコードエディタ。エージェント型AIワークフロー、リアルタイムコラボレーション、ホスト型モデル・独自キー・サブスクリプション・ゲートウェイ・ローカルモデルによる柔軟なモデル利用をサポートします。
Cline
cline.bot
VS Code拡張機能、CLI、エンタープライズ向けで利用できるオープンソースのAIコーディングエージェント。権限ベースの操作でコードの作成・編集・検証を支援し、AI推論は従量課金です。