MCPcopy
hub / github.com/onlook-dev/onlook

github.com/onlook-dev/onlook @v0.2.33 sqlite

repository ↗ · DeepWiki ↗ · release v0.2.33 ↗
2,949 symbols 9,310 edges 603 files 21 documented · 1%
README

image

Onlook

Cursor for Designers



<a href="https://github.com/onlook-dev/desktop/wiki"><strong>Explore the docs »</strong></a>






<a href="https://youtu.be/RSX_3EaO5eU?feature=shared">View Demo</a>
·
<a href="https://github.com/onlook-dev/desktop/issues/new?labels=bug&template=bug-report---.md">Report Bug</a>
·
<a href="https://github.com/onlook-dev/desktop/issues/new?labels=enhancement&template=feature-request---.md">Request Feature</a>

Discord LinkedIn Twitter Weave

Table of Contents

  1. Installation
  2. Usage
  3. Roadmap
  4. Contributing
  5. Contact
  6. Acknowledgments
  7. License

The open-source Cursor for Designers

Seamlessly integrate with any website or web app running on React + TailwindCSS, and make live edits directly in the browser DOM. Customize your design, control your codebase, and push your changes without compromise.

https://github.com/user-attachments/assets/c8782d1e-fedc-46f3-8735-c3a762d4db16

Onlook-GitHub-Example

Built With

  • React
  • Electron
  • Tailwind
  • Vite

Stay up-to-date

Onlook officially launched our first version of Onlook on July 08, 2024 and we've shipped a ton since then. Watch releases of this repository to be notified of future updates, and you can follow along with us on LinkedIn or Substack where we write a weekly newsletter.

Getting Started

image

Installation

  1. Visit onlook.com to download the app.
  2. Run locally following this guide

Usage

Onlook will run on any React project, bring your own React project or create one using Onlook

Screenshot 2024-11-27 at 9 36 47 AM

Use the chat to create or edit a project you're working on. At any time, you can always right-click an element to open up the exact location of the element in code. Just be sure to choose your preferred IDE in the upper-right Corner of the screen.

image

image

Roadmap

image

See how we're tracking towards major milestones, and read the wiki for details on each version of Onlook. Here's a rough overview of some of the major features we're looking at:

  • [x] Browser
  • [x] Editor
  • [x] Write-to-code
  • [X] AI chat
  • [ ] Variables
  • [ ] Components
  • [ ] Hosting

Also check the open issues for a full list of proposed features (and known issues).

Contributing

image

If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also open issues.

See the CONTRIBUTING.md for instructions and code of conduct.

Contributors

Contact

image

Acknowledgments

Projects we're inspired by:

License

Distributed under the Apache 2.0 License. See LICENSE.md for more information.

Extension points exported contracts — how you extend this code

FontParts (Interface)
* Extracts the actual font name from a font file name * Removes file extensions, weight/style indicators, and other com
packages/utility/src/font.ts
SingleStyle (Interface)
(no doc) [2 implementers]
apps/studio/src/lib/editor/styles/models.ts
UserChatMessage (Interface)
(no doc) [1 implementers]
packages/models/src/chat/message/message.ts
Prop (Interface)
(no doc)
packages/types/src/adapters/index.ts
GitCommit (Interface)
(no doc)
packages/git/src/git.ts
FileOperationHandlers (Interface)
(no doc)
packages/ai/src/tools/index.ts
CommandDialogProps (Interface)
(no doc)
packages/ui/src/components/command.tsx
TemplateNode (Interface)
(no doc)
plugins/babel/src/model.ts

Core symbols most depended-on inside this repo

error
called by 522
apps/studio/electron/preload/webview/bundles/csstree.esm.js
map
called by 296
apps/studio/electron/preload/webview/bundles/csstree.esm.js
cn
called by 243
packages/ui/src/utils/cn.ts
push
called by 216
apps/studio/electron/preload/webview/bundles/csstree.esm.js
t
called by 173
apps/studio/electron/preload/webview/bundles/csstree.esm.js
getCustomVal
called by 143
apps/studio/common/helpers/twTranslator/index.ts
invokeMainChannel
called by 124
apps/studio/src/lib/utils/index.ts
filter
called by 123
apps/studio/electron/preload/webview/bundles/csstree.esm.js

Shape

Function 1,630
Method 820
Interface 263
Class 157
Enum 79

Languages

TypeScript100%

Modules by API surface

apps/studio/electron/preload/webview/bundles/csstree.esm.js464 symbols
apps/studio/src/lib/editor/engine/index.ts46 symbols
packages/utility/src/color.ts30 symbols
apps/studio/src/lib/editor/engine/font/index.ts27 symbols
apps/studio/src/lib/editor/engine/webview/index.ts26 symbols
apps/studio/src/lib/editor/engine/code/index.ts24 symbols
apps/studio/src/routes/editor/EditPanel/DevTab/index.tsx23 symbols
apps/studio/src/routes/editor/Canvas/Overlay/ResizeHandles.tsx23 symbols
apps/studio/src/lib/projects/run.ts21 symbols
apps/studio/src/lib/editor/engine/theme/index.ts21 symbols
apps/studio/src/lib/projects/index.ts20 symbols
apps/studio/src/lib/editor/engine/pages/index.ts20 symbols

Dependencies from manifests, versioned

@ai-sdk/anthropic1.1.17 · 1×
@babel/core7.23.6 · 1×
@babel/generator7.14.5 · 1×
@babel/parser7.14.3 · 1×
@babel/preset-env7.23.6 · 1×
@babel/preset-react7.23.3 · 1×
@babel/preset-typescript7.24.1 · 1×
@babel/traverse7.14.5 · 1×
@babel/types7.24.7 · 1×
@codemirror/autocomplete6.18.6 · 1×
@codemirror/closebrackets0.19.2 · 1×
@codemirror/lang-css6.0.0 · 1×

For agents

$ claude mcp add onlook \
  -- python -m otcore.mcp_server <graph>

⬇ download graph artifact