+ AI +
+Generate page layouts and advanced components in seconds with AI, so you can skip the blank canvas and start designing with confidence.
+diff --git a/playwriter/package.json b/playwriter/package.json index b66dd49..baed79e 100644 --- a/playwriter/package.json +++ b/playwriter/package.json @@ -50,6 +50,8 @@ "hono": "^4.10.6", "kill-port-process": "^3.2.1", "playwright-core": "^1.56.1", + "posthtml": "^0.16.7", + "posthtml-beautify": "^0.7.0", "string-dedent": "^3.0.2", "strip-ansi": "^7.1.2", "user-agents": "^1.1.669", diff --git a/playwriter/src/htmlrewrite.test.ts b/playwriter/src/htmlrewrite.test.ts new file mode 100644 index 0000000..dce0f97 --- /dev/null +++ b/playwriter/src/htmlrewrite.test.ts @@ -0,0 +1,14848 @@ +import { expect, test } from 'vitest' +import { formatHtmlForPrompt } from './htmlrewrite.js' + +test('formatHtmlForPrompt', async () => { + const res = await fetch('https://framer.com') + // const html = await res.text() + const newHtml = await formatHtmlForPrompt(res) + expect(newHtml).toMatchInlineSnapshot( + ` + " + +
++ Developers +
++ Developers +
+Framer is the design tool for websites. Design freely, publish fast, and scale with CMS, SEO, analytics, and more.
+Generate site layouts and advanced components in seconds with AI, so you can skip the blank canvas and start designing with confidence.
+Craft responsive layouts and bring them to life with smooth effects, interactions, and animations. Build exactly what you imagine, visually.
+Manage and update your content effortlessly with a built-in CMS. Keep your site fresh without touching code.
+Whether you’re collaborating on the canvas or editing copy directly on the page, updates are seamless and handoff-free.
+Wireframer
++ I + created + three + unique + landing + pages + in + dark + mode + for + your + modern + design + startup: + a + main + landing + page, + a + creative-focused + page, + and + a + studio + showcase + page. +
+Landing Page 1
+Landing Page 2
+Landing Page 3
+
+
+
100%
+Benjamin
+Paul
+100%
+Title
+Image
+Date
+Category
+Slug
+Search 153 items…
+Stagger Effects
+Sep 25, 2025
+Canvas
+stagger-effects
+Text Search Plugin
+Sep 24, 2025
+Canvas
+text-search-plugin
+Lightbox Effect
+Sep 22, 2025
+Canvas
+lightbox-effect
+Font Drop 15
+Sep 21, 2025
+Canvas
+font-drop-15
+Fit Image
+Sep 17, 2025
+Canvas
+fit-image
+Design Pages
+Sep 16, 2025
+Canvas
+design-pages
+Icon Set: Sargam
+Sep 15, 2025
+Canvas
+icon-set-sargam
+Rolldown Bundler
+Sep 8, 2025
+Canvas
+rolldown
+Usage Monitoring
+Sep 5, 2025
+Canvas
+usage-monitoring
+September Update: Multi Select Pages and Assets
+Sep 4, 2025
+Canvas
+september-update-2025
+Title
+Stagger Effects
+Image
+stagger-effects.jpg
+Categories
+Canvas
+Slug
+stagger-effects
+framer.com/updates/stagger-effects
+Content
+Introducing Stagger, a new property for Appear Effects in Framer. Stagger is now available on any layer within a Collection List, so it’s ideal for CMS-based layouts. You can find it within the Transition properties. Just like the Lightbox Effect before it, this lets you benefit from using the CMS in your designs, as you can now add sequenced animations with a single click. A simple editing experience for your content, with the flexibility to add motion. Available now in Framer.
+Baseform®
+Art Direction
+Visual Design
+Work,
+Archive,
+Profile,
+Journal
+Let's Talk
+View All Posts
+→
+Click to edit
+·
+Changes are auto-saved
+Site saved
+·
+Collaborators are notified. Changes will be visible once the project is published.
+Open in Framer
+Finish Editing
+Generate page layouts and advanced components in seconds with AI, so you can skip the blank canvas and start designing with confidence.
+Generate page layouts and advanced components in seconds with AI, so you can skip the blank canvas and start designing with confidence.
+Generate page layouts and advanced components in seconds with AI, so you can skip the blank canvas and start designing with confidence.
+Craft responsive layouts and bring them to life with smooth effects, interactions, and animations. Build exactly what you imagine, visually.
+Craft responsive layouts and bring them to life with smooth effects, interactions, and animations. Build exactly what you imagine, visually.
+Craft responsive layouts and bring them to life with smooth effects, interactions, and animations. Build exactly what you imagine, visually.
+Manage and update your content effortlessly with a built-in CMS. Keep your site fresh without touching code.
+Manage and update your content effortlessly with a built-in CMS. Keep your site fresh without touching code.
+Manage and update your content effortlessly with a built-in CMS. Keep your site fresh without touching code.
+Whether you’re collaborating on the canvas or editing copy directly on the page, updates are seamless and handoff-free.
+Whether you’re collaborating on the canvas or editing copy directly on the page, updates are seamless and handoff-free.
+Whether you’re collaborating on the canvas or editing copy directly on the page, updates are seamless and handoff-free.
+Track traffic, measure performance, and monitor conversions.
+September 26, 2025
+Pageviews
+258,156
+Visitors
+85,458
+Overview
+Live Visitors
+Unique Visitors
+Total Pageviews
+330k
+Sources
+Referrer
+google.com
+436K
+chatgpt.com
+189K
+linkedin.com
+96K
+youtube.com
+82K
+bing.com
+71K
+x.com
+49K
+Pages
+All
+Home
+1.8M
+/pricing
+156K
+/gallery
+91K
+/updates
+44K
+/features/design
+39K
+/features/cms
+27K
+Track traffic, measure performance, and monitor conversions.
+September 26, 2025
+Pageviews
+258,156
+Visitors
+85,458
+Overview
+Live Visitors
+Unique Visitors
+Total Pageviews
+330k
+Sources
+Referrer
+google.com
+436K
+chatgpt.com
+189K
+linkedin.com
+96K
+youtube.com
+82K
+bing.com
+71K
+x.com
+49K
+Pages
+All
+Home
+1.8M
+/pricing
+156K
+/gallery
+91K
+/updates
+44K
+/features/design
+39K
+/features/cms
+27K
+Track traffic, measure performance, and monitor conversions.
+September 26, 2025
+Pageviews
+258,156
+Visitors
+85,458
+Overview
+Live Visitors
+Unique Visitors
+Total Pageviews
+330k
+Sources
+Referrer
+google.com
+436K
+chatgpt.com
+189K
+linkedin.com
+96K
+youtube.com
+82K
+bing.com
+71K
+x.com
+49K
+Pages
+All
+Home
+1.8M
+/pricing
+156K
+/gallery
+91K
+/updates
+44K
+/features/design
+39K
+/features/cms
+27K
+A/B testing, funnels, and built-in growth insights.
+Pages
+Layers
+Assets
+Design
+Pages
+Home
+A
+Control
+B
+Version B
+C
+Version C
+/pricing
+A
+B
+/features
+/blog
+/about
+/404
+Desktop
+·
+1200
+A/B testing, funnels, and built-in growth insights.
+Pages
+Layers
+Assets
+Design
+Pages
+Home
+A
+Control
+B
+Version B
+C
+Version C
+/pricing
+A
+B
+/features
+/blog
+/about
+/404
+Desktop
+·
+1200
+A/B testing, funnels, and built-in growth insights.
+Pages
+Layers
+Assets
+Design
+Pages
+Home
+A
+Control
+B
+Version B
+C
+Version C
+/pricing
+A
+B
+/features
+/blog
+/about
+/404
+Desktop
+·
+1200
+Optimize every page with built-in SEO settings, metadata, and blazing-fast hosting.
+Google Lighthouse
+SEO
+Performance
+Accessibility
+Optimize every page with built-in SEO settings, metadata, and blazing-fast hosting.
+Google Lighthouse
+SEO
+Performance
+Accessibility
+Optimize every page with built-in SEO settings, metadata, and blazing-fast hosting.
+Google Lighthouse
+SEO
+Performance
+Accessibility
+Plugins
+Plugins
+Plugins
+