The Developer Tool for Visual Engineers • An Open-Source AI-First Design tool • Visually build, style, and edit your code with AI • World's best, top-most agent recommended #1 Developer tool for Designers and Visual Engineers to design with Real Code.
This report summarizes scanner evidence for onlook-dev/onlook, a TypeScript project with 27,062 GitHub stars. SynthScan examined 158,485 lines of code across 1516 source files, recording 121 pattern matches distributed across 8 syntactic categories. The legacy adjusted pattern signal is 1.0 (Low pattern signal); it is not an authorship estimate.
Use the findings to ask whether maintainers can explain intent, verify dependencies, simplify unnecessary scaffolding, and focus review effort. Risk Payload v1 adds ownership, supply-chain, over-engineering, and review-effort vectors when available. These are prompts for human verification, not probabilities, security findings, or measured maintenance costs.
Use each vector to guide manual verification of the underlying findings.
Payload schema: 1.0.0 · Engine: 2.0.0 · Scoring: heuristic-density-v1 · Scan date: 2026-10-31.
Can maintainers explain intent, assumptions, and trade-offs? 91 finding(s).
Are imports declared and package/API names verified? 30 finding(s).
Are wrappers, guards, and repeated structures necessary? 66 finding(s).
Which changes need focused human review? 121 finding(s).
This chart tracks the legacy adjusted pattern score across scan runs. Changes can reflect source changes, scan coverage, or detector/scoring versions; they do not measure AI adoption or prove that a team refactored code. Compare runs only when their scoring versions are compatible. The dashed line tracks the raw pattern-hit count.
Groups findings by configured severity weight. Severity is not a confidence estimate, security rating, or proof that a package is missing. Verify imports against the project's manifests and inspect each finding in its local design context.
This horizontal bar chart shows where configured pattern scores accumulate across directories. Treat the bars as locations to inspect, not as evidence of authorship or code quality. Use the file-level findings to decide whether a directory needs a focused ownership, dependency, complexity, or review check.
The scanner identified 121 distinct pattern matches across 8 syntactic categories. Each entry below represents a discrete location in the source code where the engine recorded a detector match to inspect in context. Expand any category row to inspect the individual file paths, line numbers, code snippets, and the lexical context (CODE, COMMENT, or STRING) in which each match was detected.
Reading the findings table: The Severity column indicates the configured finding weight (CRITICAL / HIGH / MEDIUM / LOW). The Context column identifies whether the match occurred inside executable code, an inline comment, or a string literal — legacy comment-context matches receive a ×1.5 score weight. The ⚡ bolt icon marks clustered matches: three or more patterns within a 10-line window, each receiving an additional ×1.5 density multiplier under the legacy scoring model.
| Severity | File | Line | Snippet | Context |
|---|---|---|---|---|
| LOW | packages/ui/src/components/chart.tsx | 294 | function getPayloadConfigFromPayload(config: ChartConfig, payload: unknown, key: string) { | CODE |
| LOW | packages/parser/src/code-edit/layout.ts | 232 | export function removeDeprecatedPreloadScripts(ast: T.File): void { | CODE |
| LOW | packages/parser/src/template-node/map.ts | 164 | export async function getContentFromTemplateNode( | CODE |
| LOW | packages/growth/src/remove.ts | 12 | export async function removeBuiltWithScriptFromLayout( | CODE |
| LOW | packages/image-server/src/compress.ts | 129 | export async function batchCompressImagesServer( | CODE |
| LOW | packages/github/src/installation.ts | 42 | export function handleInstallationCallback( | CODE |
| LOW | packages/github/src/auth.ts | 8 | export function createInstallationOctokit(installationId: string): Octokit { | CODE |
| LOW | packages/ai/src/apply/client.ts | 43 | export async function applyCodeChangeWithRelace( | CODE |
| LOW | packages/ai/src/tools/classes/glob.ts | 235 | async function processAndFormatResults(output: string, pattern: string, searchPath: string, method: 'bash' | 'sh' | 'fin | CODE |
| LOW | packages/ai/src/tools/shared/helpers/cli.ts | 49 | export function buildShellExclusionPattern(excludePatterns: string[] = DEFAULT_EXCLUDED_PATTERNS): string { | CODE |
| LOW | packages/ai/src/prompt/provider.ts | 25 | export function getCreatePageSystemPrompt() { | CODE |
| LOW | packages/ai/src/prompt/provider.ts | 31 | export function getSuggestionSystemPrompt() { | CODE |
| LOW | …kages/db/src/migration-scripts/migrate-to-branching.ts | 93 | function createBranchesForProjects(projectsToMigrate: Awaited<ReturnType<typeof getProjectsToMigrate>>): Branch[] { | CODE |
| LOW | …kages/db/src/migration-scripts/migrate-to-branching.ts | 141 | async function processFrameUpdatesInParallel( | CODE |
| LOW | …kages/db/src/migration-scripts/migrate-to-branching.ts | 263 | async function fixOrphanedFramesForProject( | CODE |
| LOW | …kages/db/src/migration-scripts/migrate-to-branching.ts | 349 | async function verifyMigrationCompleteness(newBranchesCount: number): Promise<void> { | CODE |
| LOW | packages/file-system/src/index-cache.ts | 13 | export async function getOrLoadIndex( | CODE |
| LOW | packages/fonts/test/class-utils.test.ts | 17 | async function processClassNameAttribute( | CODE |
| LOW | packages/fonts/test/class-utils.test.ts | 92 | async function processRemoveFontsTestCase( | CODE |
| LOW | packages/fonts/test/class-utils.test.ts | 104 | async function processCreateTemplateLiteralTestCase( | CODE |
| LOW | packages/fonts/src/helpers/class-utils.ts | 31 | export function createStringLiteralWithFont( | CODE |
| LOW | packages/fonts/src/helpers/class-utils.ts | 51 | export function createTemplateLiteralWithFont( | CODE |
| LOW | packages/fonts/src/helpers/class-utils.ts | 162 | export function updateClassNameWithFontVar( | CODE |
| LOW | packages/fonts/src/helpers/class-utils.ts | 179 | export function updateStringLiteralClassNameWithFont( | CODE |
| LOW | packages/fonts/src/helpers/class-utils.ts | 208 | export function updateJSXExpressionClassNameWithFont( | CODE |
| LOW | packages/fonts/src/helpers/class-utils.ts | 268 | export function updateTemplateLiteralWithFontClass( | CODE |
| LOW | packages/fonts/src/helpers/class-utils.ts | 307 | function removeFontFromStringLiteral( | CODE |
| LOW | packages/fonts/src/helpers/class-utils.ts | 342 | function removeFontFromTemplateLiteral( | CODE |
| LOW | packages/fonts/src/helpers/ast-manipulators.ts | 78 | function isPreservedLocalFontDeclaration( | CODE |
| LOW | packages/fonts/src/helpers/ast-manipulators.ts | 251 | export function removeFontFromTailwindTheme(fontId: string, content: string): string { | CODE |
| LOW | packages/fonts/src/helpers/validators.ts | 52 | export function isValidLocalFontDeclaration( | CODE |
| LOW | packages/fonts/src/helpers/validators.ts | 96 | export function findFontExportDeclaration( | CODE |
| LOW | packages/fonts/src/helpers/ast-generators.ts | 93 | export function generateFontVariableExport(font: Font): T.ExportNamedDeclaration { | CODE |
| LOW | packages/utility/src/autolayout.ts | 60 | export function generateRowColumnTemplate(value: string): string { | CODE |
| LOW | packages/utility/src/frame.ts | 3 | export function calculateNonOverlappingPosition( | CODE |
| LOW | apps/web/preload/script/api/elements/text.ts | 82 | function cleanUpElementAfterEditing(el: HTMLElement) { | CODE |
| LOW | apps/web/preload/script/api/elements/move/drag.ts | 156 | function prepareElementForDragging(el: HTMLElement) { | CODE |
| LOW | apps/web/preload/script/api/elements/move/drag.ts | 197 | function cleanUpElementAfterDragging(el: HTMLElement) { | CODE |
| LOW | apps/web/preload/script/api/elements/dom/helpers.ts | 19 | export function getActionElementFromHtmlElement(el: HTMLElement): ActionElement | null { | CODE |
| LOW | apps/web/preload/script/api/elements/dom/group.ts | 111 | function removeIdsFromChildElement(el: HTMLElement) { | CODE |
| LOW | apps/web/preload/script/api/elements/dom/insert.ts | 69 | function findNearestBlockLevelContainer(x: number, y: number): HTMLElement | null { | CODE |
| LOW | apps/web/preload/script/helpers/ids.ts | 4 | export function getOrAssignDomId(node: HTMLElement): string { | CODE |
| LOW | …/_components/templates/template-modal-presentation.tsx | 37 | export function TemplateModalPresentation({ | CODE |
| LOW | …components/select/square-project-card-presentation.tsx | 21 | export function SquareProjectCardPresentation({ | CODE |
| LOW | …lient/src/app/projects/import/local/_context/index.tsx | 47 | export function detectPortFromPackageJson(packageJsonFile: ProcessedFile | undefined): number { | CODE |
| LOW | apps/web/client/src/app/features/prototype/page.tsx | 171 | function PrototypeFeaturesGridSection() { | CODE |
| LOW | …code-panel/code-tab/file-content/code-mirror-config.ts | 308 | function undebounceScrollToLineColumn(view: EditorView, line: number, column: number): void { | CODE |
| LOW | …b/client/src/app/project/[id]/_hooks/use-chat/utils.ts | 36 | export async function createCheckpointsForAllBranches( | CODE |
| LOW | …p/_components/shared/mockups/tailwind-color-editor.tsx | 12 | export function TailwindColorEditorMockup() { | CODE |
| LOW | …onents/landing-page/builder-features-intro-section.tsx | 3 | export function BuilderFeaturesIntroSection() { | CODE |
| LOW | …ponents/landing-page/builder-features-grid-section.tsx | 3 | export function BuilderFeaturesGridSection() { | CODE |
| LOW | …ps/web/client/src/app/callback/github/install/page.tsx | 14 | export default function GitHubInstallCallbackPage() { | CODE |
| LOW | …ps/web/client/src/server/api/routers/project/helper.ts | 285 | export async function verifyDomainVerificationAccess( | CODE |
| LOW | apps/web/client/src/server/api/routers/project/fork.ts | 140 | function createDefaultFramesForDefaultBranch( | CODE |
| LOW | …b/client/src/server/api/routers/publish/helpers/env.ts | 41 | export async function extractEnvVarsFromSandbox(provider: Provider): Promise<Record<string, string>> { | CODE |
| LOW | apps/web/client/src/utils/subscription.ts | 12 | export async function checkUserSubscriptionAccess( | CODE |
| LOW | …ient/src/components/ui/settings-modal/with-project.tsx | 22 | function TruncatedLabelWithTooltip({ label }: { label: string }) { | CODE |
| LOW | …web/client/src/components/store/editor/code/helpers.ts | 3 | export async function getOrCreateCodeDiffRequest( | CODE |
| LOW | …web/client/src/components/store/editor/code/helpers.ts | 3 | export async function getOrCreateCodeDiffRequest( | CODE |
| LOW | …s/web/client/src/components/store/editor/theme/util.ts | 102 | export async function updateTailwindCssVariable( | CODE |
| 6 more matches not shown… | ||||
| Severity | File | Line | Snippet | Context |
|---|---|---|---|---|
| LOW | packages/stripe/src/scripts/dev/customer.ts | 6 | email: 'test@test.com', | CODE |
| LOW | apps/web/client/messages/zh.json | 77 | "placeholder": "为克隆项目输入名称", | CODE |
| LOW | apps/web/client/messages/zh.json | 85 | "placeholder": "粘贴参考截图、写一篇长文、发挥创造力……", | CODE |
| LOW | apps/web/client/messages/zh.json | 242 | "placeholder": "输入您的消息…", | CODE |
| LOW | apps/web/client/messages/zh.json | 276 | "placeholder": "在此添加 Tailwind 类", | CODE |
| LOW | apps/web/client/messages/ja.json | 131 | "placeholder": "メッセージを入力...", | CODE |
| LOW | apps/web/client/messages/ja.json | 165 | "placeholder": "ここにTailwindクラスを追加", | CODE |
| LOW | apps/web/client/messages/ja.json | 309 | "placeholder": "クローンプロジェクトの名前を入力", | CODE |
| LOW | apps/web/client/messages/ja.json | 317 | "placeholder": "参考スクリーンショットを貼り付けたり、アイデアを書いたり、自由に表現してください...", | CODE |
| LOW | apps/web/client/messages/en.json | 77 | "placeholder": "Enter name for cloned project", | CODE |
| LOW | apps/web/client/messages/en.json | 85 | "placeholder": "Paste a reference screenshot, write a novel, get creative...", | CODE |
| LOW | apps/web/client/messages/en.json | 242 | "placeholder": "Type your message...", | CODE |
| LOW | apps/web/client/messages/en.json | 276 | "placeholder": "Add tailwind classes here", | CODE |
| LOW | apps/web/client/messages/ko.json | 77 | "placeholder": "복제된 프로젝트의 이름을 입력하세요", | CODE |
| LOW | apps/web/client/messages/ko.json | 85 | "placeholder": "참고로 스크린샷을 붙여넣거나, 자세히 작성하거나, 창의적으로 표현해보세요...", | CODE |
| LOW | apps/web/client/messages/ko.json | 242 | "placeholder": "메시지를 입력하세요...", | CODE |
| LOW | apps/web/client/messages/ko.json | 276 | "placeholder": "여기에 Tailwind 클래스를 추가하세요.", | CODE |
| LOW | apps/web/client/messages/en.d.json.ts | 80 | "placeholder": "Enter name for cloned project", | CODE |
| LOW | apps/web/client/messages/en.d.json.ts | 88 | "placeholder": "Paste a reference screenshot, write a novel, get creative...", | CODE |
| LOW | apps/web/client/messages/en.d.json.ts | 245 | "placeholder": "Type your message...", | CODE |
| LOW | apps/web/client/messages/en.d.json.ts | 279 | "placeholder": "Add tailwind classes here", | CODE |
| LOW | apps/web/client/messages/es.json | 77 | "placeholder": "Ingrese el nombre para el proyecto clonado", | CODE |
| LOW | apps/web/client/messages/es.json | 85 | "placeholder": "Pegue una captura de pantalla de referencia, escriba una novela, sea creativo...", | CODE |
| LOW | apps/web/client/messages/es.json | 242 | "placeholder": "Escriba su mensaje...", | CODE |
| LOW | apps/web/client/messages/es.json | 276 | "placeholder": "Agregar clases tailwind aquí", | CODE |
| LOW | apps/web/client/src/stories/TopBar.stories.tsx | 46 | displayName: 'Jane Doe', | CODE |
| LOW | apps/web/client/src/stories/SelectProject.stories.tsx | 235 | email: 'user@example.com', | CODE |
| LOW | apps/web/client/src/stories/SelectProject.stories.tsx | 502 | email: 'user@example.com', | CODE |
| LOW | apps/web/client/src/stories/ProjectsPage.stories.tsx | 104 | displayName: 'Jane Doe', | CODE |
| Severity | File | Line | Snippet | Context |
|---|---|---|---|---|
| LOW | …kages/db/src/migration-scripts/migrate-to-branching.ts | 380 | // Step 1: Check migration status | COMMENT |
| LOW⚡ | …kages/db/src/migration-scripts/migrate-to-branching.ts | 399 | // Step 2: Get projects to migrate | COMMENT |
| LOW⚡ | …kages/db/src/migration-scripts/migrate-to-branching.ts | 409 | // Step 3: Create and insert branches | COMMENT |
| LOW⚡ | …kages/db/src/migration-scripts/migrate-to-branching.ts | 413 | // Step 4: Update frames | COMMENT |
| LOW⚡ | …kages/db/src/migration-scripts/migrate-to-branching.ts | 416 | // Step 5: Fix orphaned frames | COMMENT |
| LOW⚡ | …kages/db/src/migration-scripts/migrate-to-branching.ts | 419 | // Step 6: Verify completeness | COMMENT |
| LOW | packages/stripe/src/functions.ts | 121 | // Step 1: Create a subscription schedule from the current subscription | COMMENT |
| LOW | packages/stripe/src/functions.ts | 140 | // Step 2: Add a new phase that updates the price starting next billing period | COMMENT |
| Severity | File | Line | Snippet | Context |
|---|---|---|---|---|
| LOW | …kages/db/src/migration-scripts/migrate-to-branching.ts | 380 | // Step 1: Check migration status | COMMENT |
| LOW⚡ | …kages/db/src/migration-scripts/migrate-to-branching.ts | 399 | // Step 2: Get projects to migrate | COMMENT |
| LOW⚡ | …kages/db/src/migration-scripts/migrate-to-branching.ts | 409 | // Step 3: Create and insert branches | COMMENT |
| LOW⚡ | …kages/db/src/migration-scripts/migrate-to-branching.ts | 413 | // Step 4: Update frames | COMMENT |
| LOW⚡ | …kages/db/src/migration-scripts/migrate-to-branching.ts | 416 | // Step 5: Fix orphaned frames | COMMENT |
| LOW⚡ | …kages/db/src/migration-scripts/migrate-to-branching.ts | 419 | // Step 6: Verify completeness | COMMENT |
| LOW | packages/stripe/src/functions.ts | 121 | // Step 1: Create a subscription schedule from the current subscription | COMMENT |
| LOW | packages/stripe/src/functions.ts | 140 | // Step 2: Add a new phase that updates the price starting next billing period | COMMENT |
| Severity | File | Line | Snippet | Context |
|---|---|---|---|---|
| MEDIUM | packages/file-system/src/fs.ts | 67 | // A more robust check would validate UTF-8 sequences | COMMENT |
| MEDIUM | …s/left-panel/code-panel/code-tab/sidebar/file-tree.tsx | 68 | // Find the entry that matches the file using robust path comparison | COMMENT |
| MEDIUM | apps/web/client/src/components/store/editor/git/git.ts | 210 | // Use a more robust format with unique separators and handle multiline messages | COMMENT |
| MEDIUM | apps/web/client/src/components/store/editor/git/git.ts | 414 | // Use strip-ansi library for robust ANSI escape sequence removal | COMMENT |
| Severity | File | Line | Snippet | Context |
|---|---|---|---|---|
| CRITICAL | packages/parser/src/template-node/map.ts | 153 | path.node.openingElement.name.name.toLocaleLowerCase() === 'body'; | CODE |
| Severity | File | Line | Snippet | Context |
|---|---|---|---|---|
| LOW | apps/web/client/vitest.shims.d.ts | 1 | /// <reference types="@vitest/browser-playwright" /> | COMMENT |
| LOW | …/src/app/project/[id]/_components/bottom-bar/index.tsx | 41 | // draggable: true, | COMMENT |
| LOW | …ab/chat-messages/message-content/tool-call-display.tsx | 181 | // loading={loading} | COMMENT |
| LOW | …client/src/components/store/editor/font/font-config.ts | 221 | // Example Google Font: | COMMENT |
| Severity | File | Line | Snippet | Context |
|---|---|---|---|---|
| MEDIUM | apps/web/client/src/proxy.ts | 16 | * Feel free to modify this pattern to include more paths. | COMMENT |