A free, open-source
visual editor for React
Onlookを使用すると、Reactサイトを視覚的に編集し、変更をリアルタイムでコードに書き戻すことができます。
迅速な設計のための使い慣れたツール
他のデザインツールと同様に、あなたのウェブサイトと対話することができます。
Import existing project
Work on your React UI
New Onlook Project
Start a React App
どんなReactのウェブサイトでも、
Tailwindでスタイリング可能
オンルックにあなた自身のプロジェクトを持ち込むか、オンルックから新しいReactサイトを始めましょう
デザインするようにコードを書く
オンルックは、信頼できるコードを必要な場所に正確に配置します。
Layers
Side menu
Primary navigation
Opener
H2
Welcome to your Dashboard
Overview
Client Logo
Actions
Share
New project
Projects section
Controls
Filter
Sort
Project • 12 instances
ウェブサイトを自由自在にスタイル設定しよう
レイアウトの調整、色の変更、テキストの修正などが可能です。設定は不要です。
Coming Soon
デザインシステムを手元で操作する
OnlookはあなたのReactウェブサイトのデザイン要素を検出し、それらをビジュアルエディタで使用できるようにします。
Variables
Assets
Color Styles
blue-100
blue-200
blue-300
blue-400
blue-500
blue-600
blue-700
blue-800
teal-100
teal-200
teal-300
teal-400
Teal / 500
Teal / 600
Teal / 700
Teal / 800
Variables
Assets
Text Styles
title1
36/Auto
title2
24/Auto
title3
20/Auto
largePlus
18/140
large
18/140
regularPlus
15/140
regular
15/140
smallPlus
13/140
small
33/140
microPlus
11/Auto
micro
11/Auto
よくある質問
さあ、変化の時間です。いや、2つでも3つでもいけるはず！
新しいアイデア、新しいスタイル、新しいコピー、新しいレイアウトなどを試してみてください。
