Coding agents can write code but can't see what it renders. They generate a component, maybe run a build, and hope for the best. There's no feedback loop between "I wrote this UI" and "this is what it actually looks like." I've been building something on the side to fix this. RVST is a native desktop rendering engine for Svelte. Written in Rust. No browser. No webview. Your Svelte components compile to JS, RVST runs them in an embedded runtime, lays out with Taffy, renders with Vello on the GPU, and displays in a native window. But the real point isn't replacing Electron. It's RenderQuery. Agents get a test harness that opens a real GPU-rendered window and takes JSON commands on stdin. Snapshot the scene graph. Find elements by role. Click by text. Diff state changes. Every interaction auto-runs lints — contrast regressions, lost focus, missing handlers — surfaced without asking. 8 ASCII introspection modes let agents read a UI without a single screenshot. Semantic trees, layout rects, pixel renders, structure maps — all from the CLI, all pipeable. Built-in analyzers run on the live render: WCAG contrast from actual pixels, density heatmaps, accessibility audits, auto diagnostics. Open source. Apache 2.0. npm install -g @rvst/cli https://lnkd.in/eAHN8kDH
More Relevant Posts
-
This is the same problem we see in creative, just in a different form. You can generate endlessly (ads, UIs, code) but without a tight feedback loop on what actually renders and performs, you’re left guessing. The idea of agents interacting with real outputs (not just generating them) feels like the shift from “more content” → “better decisions.” Different layer, same problem. Without feedback on what actually works, you’re just guessing. Shane Murphy is clearly thinking deeply about this layer of the stack, excited to see where this goes. Definitely worth following his work.
Building the future of AI harness intelligence. Lead Scientist and Founder at Zaius 🙊 As seen in Forbes, Insider, and CBS News. 🗞️
Coding agents can write code but can't see what it renders. They generate a component, maybe run a build, and hope for the best. There's no feedback loop between "I wrote this UI" and "this is what it actually looks like." I've been building something on the side to fix this. RVST is a native desktop rendering engine for Svelte. Written in Rust. No browser. No webview. Your Svelte components compile to JS, RVST runs them in an embedded runtime, lays out with Taffy, renders with Vello on the GPU, and displays in a native window. But the real point isn't replacing Electron. It's RenderQuery. Agents get a test harness that opens a real GPU-rendered window and takes JSON commands on stdin. Snapshot the scene graph. Find elements by role. Click by text. Diff state changes. Every interaction auto-runs lints — contrast regressions, lost focus, missing handlers — surfaced without asking. 8 ASCII introspection modes let agents read a UI without a single screenshot. Semantic trees, layout rects, pixel renders, structure maps — all from the CLI, all pipeable. Built-in analyzers run on the live render: WCAG contrast from actual pixels, density heatmaps, accessibility audits, auto diagnostics. Open source. Apache 2.0. npm install -g @rvst/cli https://lnkd.in/eAHN8kDH
Media Attachment
To view or add a comment, sign in
-
Simulating Complexity with JavaScript & KaTeX: The Race of Functions 💻 In my spare time, I love bringing mathematical concepts to life through visualization. My latest project is a "Function Race" that pits different growth rates against each other to see which one truly dominates as x approaches 50. While we often hear that the Factorial function (x!) is incredibly fast, it’s fascinating to watch x^x (Self-exponentiation) step onto the track and leave everything else in the dust. Technical Highlights of the Project: ✅ Rendering: Built with HTML5 Canvas for smooth, high-performance animations. ✅ Typography: Integrated KaTeX for high-quality, real-time LaTeX mathematical notation rendering directly over the canvas. ✅ Dynamic Sorting: Implemented a real-time easing algorithm to rearrange the bars based on their current values, creating a smooth "racing" effect. ✅ Mathematical Precision: Used Stirling’s approximation to ensure smooth growth transitions for x! across the real number line. This was a fun way to visualize why choosing the right algorithm and understanding Big O notation is so critical in software development. Polynomial growth might look manageable at first, but once you hit Exponential or Super-Exponential scales, the world changes! What’s your favorite "hidden boss" function that grows faster than people expect? Let's discuss in the comments! 👇 🔗 Explore the logic of mathematics and engineering on my YouTube channel: [https://lnkd.in/dDc4Tv5z #CreativeCoding #JavaScript #WebDevelopment #Mathematics #DataVisualization #Algorithms #BigO #STEM #SoftwareEngineering #CodingLife
To view or add a comment, sign in
-
Post #8: Page Objects in Cypress are optional, not a default Tools are details. Maintainable abstractions are the goal. Page Objects became popular because they offered structure and reuse. In modern frontend stacks, they can also become a source of indirection, hidden waits, and brittle coupling to UI details. A senior approach is not to accept or reject Page Objects by rule. It is to decide what abstraction improves signal and reduces maintenance. When Page Objects tend to break down 1) They mirror screens instead of user intent - You end up with methods that reflect layout, not behavior. A refactor that preserves behavior still breaks tests because the object was tied to implementation. 2) They hide actions and assertions - A single call can do many things. When a test fails, diagnosis becomes slower because the failure context is buried inside layers. 3) They become a dumping ground - Helpers grow without boundaries. Over time the suite becomes harder to reason about than the product itself. - What works better in Cypress most of the time 1) Small, explicit helpers focused on intent - Prefer “actions” or “tasks” that represent business intent: createOrder, loginAs and addItemToCart. - These should keep selectors and interaction rules consistent while staying readable. 2) Keep assertions close to the test - Assertions are the purpose of the test. Keeping them visible improves review quality and makes failures diagnosable. 3) Use custom commands with discipline - Custom commands are useful, but they should not become a second programming language. If an abstraction hides critical behavior, it is costing you signal. A simple rule that scales Abstract repeated interaction mechanics. Do not abstract away the story the test is telling. In your suite today, do abstractions improve clarity, or do they hide failures and slow diagnosis?
To view or add a comment, sign in
-
-
When working with JavaScript, small mistakes can sometimes lead to bigger performance problems. One common issue developers face is memory leaks caused by setInterval(). If intervals are not properly cleared, they continue running even when they are no longer needed, which can increase memory usage and affect application performance. I recently published a tutorial explaining: • What memory leaks in setInterval() are • Why they occur in real-world applications • How to properly stop intervals using clearInterval() • Practical examples and best practices If you are learning JavaScript or building dynamic web applications, understanding this concept can help you write more efficient code. You can read the full article here: https://lnkd.in/gut-2m4j #JavaScript #WebDevelopment #SoftwareDevelopment #Frontend #Programming
To view or add a comment, sign in
-
I had shared about Generative UI a while ago. Where the infographics are live UIs. The framework behind that is now open sourced by google. Its called a2ui. LLMs have been called many things, matrices, databases and agents. In reality they are conduits connecting disparate technologies together under a single language. CODE. Code can be python, rust, JS or any other numerous languages that we learn. Now all of those languages are just an interface to make it easy to work with computers and processors. https://a2ui.org/
To view or add a comment, sign in
-
Most dependency graphs are unreadable. You’ve probably seen them. A giant web of nodes and edges that looks impressive… But tells you almost nothing. The problem is not the data. It is the interface. Developers don’t think in graphs. They think in structure. Folders. Files. Hierarchies. So I tried something different. I added a browser view to Depsly that lets you explore dependencies like a file tree. You can: Traverse parent → child relationships See transitive dependencies clearly Understand structure without visual overload Same data. Completely different experience. This is now part of Depsly v0.1.8. If you want to try it: pip install depsly depsly analyze Would love feedback from people who’ve struggled with dependency graphs. #opensource #devtools #javascript #nodejs #softwareengineering #ux #programming #webdev
To view or add a comment, sign in
-
I used to think abstraction = “hiding complexity.” Building "https://lnkd.in/gSSR4AEv" changed that. This terminal simulator was a pure UI + JavaScript practice project — not solving a real-world problem, just exploring how far I could push the illusion of a system. 0 backend, 0 real OS integration Simulated commands, fake file system, mocked outputs, 100% client-side illusion To make it feel real, I had to ignore: OS kernel logic Process scheduling Actual file systems Memory management Millions of lines of real-world complexity — intentionally forgotten. That’s when it clicked: Abstraction isn’t hiding. It’s selective forgetting. Same idea I use in photography (1.5M+ views at Cognitek): I don’t “edit” reality — I remove distractions so the subject stands out. Frontend feels the same: We don’t build everything. We choose what not to build. And honestly — this project? It’s an old UI + JS practice experiment, not polished, not useful, not production-grade. #frontend #javascript #ui #learninginpublic #abstraction #webdev
To view or add a comment, sign in
-
"Make the heading bigger." 5 words. 12 messages to Claude before it touches the right element. That was my workflow every single day. "It's the h1 in the hero section." "No, the one in components/Hero.tsx." "It uses Tailwind, the class is text-3xl I think." "Actually it might be in pages/index.tsx." I was spending more time describing UI elements than actually designing them. So I built Design Mode. Point at your UI. Click. Type what you want. Claude changes the code. That's it. No more playing "guess which DOM element I mean." Here's how it works: → Hover any element to see its box model (margin, padding, border — all color-coded) → Click to annotate — just type plain English like "make this bigger" or "add more spacing" → Claude automatically reads your annotations and edits the source file → It detects your stack (Tailwind, CSS Modules, styled-components) and edits accordingly → One click to test responsive — mobile, tablet, desktop The killer feature? Every message you send to Claude silently checks for new annotations in the background. You don't even have to say "read my annotations." You just... annotate and talk. It feels invisible. It works with React, Vue, Svelte — anything with a dev server. Open source. MIT licensed. Two ways to use it: 🔌 Claude Code plugin: /plugin install design-mode ⚡ Standalone MCP: works with Claude Desktop, Cursor, Windsurf The gap between "what I see" and "what I can tell the AI" was the bottleneck. Design Mode closes it. Link in comments 👇 What's the most time you've wasted trying to describe a UI element to an AI? #ClaudeCode #DeveloperTools #AI #WebDevelopment #OpenSource
To view or add a comment, sign in
-
🚀 Built a Full-Stack Pattern Generator (Yes, seriously 😄) I recently built Pattern Studio — a small but structured full-stack system that generates 31 different text-based patterns through a clean web interface. 🔗 Live: https://lnkd.in/g8CCwntH --- ### 💡 What it does - Generates classic CLI-style patterns (rectangles, triangles, pyramids, etc.) - Converts them into a modern web experience - Fully driven by an API (no hardcoded UI tricks) --- ### 🧠 How it’s built Backend - Python-based system - Modular pattern engine (patterns.py) - API endpoints for listing + rendering patterns - CLI support preserved for traditional usage Frontend - Clean, minimal UI (HTML, CSS, JS) - Dynamic rendering via API calls - Real-time updates based on user input --- ### ⚙️ Key Features - 31 pattern types - Adjustable inputs (symbol, size, width, height) - CLI → Web transformation - Structured backend architecture - Deployed and publicly accessible --- ### 🎯 Why I built this Most people treat pattern problems as beginner exercises. I treated it like a system design problem: - Separate logic from interface - Build reusable modules - Expose functionality via API - Then layer a UI on top Same problem. Completely different approach. --- ### 📈 What this really demonstrates - Thinking beyond "just code" - Designing systems, not scripts - Converting traditional logic into scalable architecture - Bridging backend + frontend cleanly --- ### 🙏 Mentors & Guidance I’ve been fortunate to learn from people who emphasize building things the right way — not just making them work. Their focus on: - clean architecture - modular thinking - real-world systems played a big role in how I approached this project. S.P Acharya Prof. (Dr.) Pankaj Agarwal Rajesh Gupta Iflah Aijaz --- If you’re someone who still thinks pattern problems are “basic”, try turning one into a full system. That’s where the real learning starts. #FullStack #WebDevelopment #Python #SystemDesign #Projects #LearningByBuilding
To view or add a comment, sign in
-
-
HeyGen just dropped HyperFrames, an open-source framework that renders full videos straight from raw HTML. It's built for your AI agents to code directly, bypassing the prompt-engineering casino completely. Link: https://lnkd.in/eNJcP6fr
To view or add a comment, sign in
More from this author
Explore related topics
Explore content categories
- Career
- Productivity
- Finance
- Soft Skills & Emotional Intelligence
- Project Management
- Education
- Technology
- Leadership
- Ecommerce
- User Experience
- Recruitment & HR
- Customer Experience
- Real Estate
- Marketing
- Sales
- Retail & Merchandising
- Science
- Supply Chain Management
- Future Of Work
- Consulting
- Writing
- Economics
- Artificial Intelligence
- Employee Experience
- Workplace Trends
- Fundraising
- Networking
- Corporate Social Responsibility
- Negotiation
- Communication
- Engineering
- Hospitality & Tourism
- Business Strategy
- Change Management
- Organizational Culture
- Design
- Innovation
- Event Planning
- Training & Development