# Component Published articles for Component. This is one page of public article previews, not the complete archive. Follow Next page to continue. Summaries are not the original full articles. ## A Dialog Can Now Be a Native Desktop Window DevFeed: [A Dialog Can Now Be a Native Desktop Window]() Original publisher: [Read original article]() Author: Shai Almog Published: 2026-09-05T00:00:00Z Content type: release Language: en Sources: [CodeName One]() Topics: [dialog](), [Accessibility](), [Operating system](), [macOS]() Tags: [accessibility](), [bug](), [can](), [code](), [component](), [desktop](), [dialog](), [keyboard](), [macos](), [native](), [release]() ### AI overview Codename One adds an option for dialogs to open as native modal desktop windows while retaining lightweight in-window dialogs. The release also fixes top-level window ownership and updates focus, input routing, repainting, popup behavior, and accessibility handling across separate windows. ### Source excerpt Codename One dialogs can stay inside a secondary window or become native modal windows, while sheets, popups, overlays, tooltips, HTML, and accessibility now resolve the correct top level. ## CodeScanner.scan(): Barcode Scanning Without Rebuilding the Camera Pipeline DevFeed: [CodeScanner.scan(): Barcode Scanning Without Rebuilding the Camera Pipeline]() Original publisher: [Read original article]() Author: Shai Almog Published: 2026-08-26T00:00:00Z Content type: release Language: en Sources: [CodeName One]() Topics: [Barcode](), [QR Code](), [webcam](), [Code]() Tags: [camera](), [code](), [component](), [on-device](), [pipeline](), [vision]() ### AI overview Codename One adds CodeScanner and VisionCameraView, higher-level APIs for full-screen barcode scanning and embedded live vision analysis. The update also introduces typed results, coordinate helpers, image bridging, and analyzer-specific native dependency selection. ### Source excerpt CodeScanner and VisionCameraView put full-screen scanning and embedded live analysis above Codename One's on-device vision APIs, with typed results and simulator scripting. ## Design tokens: The building blocks of a design system DevFeed: [Design tokens: The building blocks of a design system]() Original publisher: [Read original article]() Published: 2026-08-18T00:00:00Z Content type: article Language: en Sources: [Aha! Engineering Blog]() Topics: [Design system](), [ui](), [CSS](), [consistency]() Tags: [atomic](), [component](), [css](), [design](), [design-system](), [source-of-truth](), [structure](), [tokens](), [ui](), [variables]() ### AI overview This article explains how design tokens provide a shared language for visual design attributes in a scalable design system. It contrasts tokens with hard-coded values, describes primitive and semantic tokens, and discusses using the Design Tokens Community Group standard to connect design and engineering. ### Source excerpt Implementing a design system at scale is often less about the pixels and more about the language we use to describe them. As a Senior Software Engineer at Aha! I've spent a lot of time thinking about how we can build a UI that is not only beautiful, ## wasmCloud 2.7: Bidirectional host component plugins, concurrent pooling, and multi-backend binding by default DevFeed: [wasmCloud 2.7: Bidirectional host component plugins, concurrent pooling, and multi-backend binding by default]() Original publisher: [Read original article]() Author: Eric Gregory Published: 2026-08-12T00:00:00Z Content type: release Language: en Sources: [wasmCloud Blog]() Topics: [WebAssembly](), [configuration](), [networking]() Tags: [component](), [concurrent](), [configuration](), [networking](), [release](), [secrets](), [wasmcloud](), [webassembly]() ### AI overview wasmCloud 2.7 introduces bidirectional host component plugins, concurrent pooled instances, and multi-backend binding by default. It also adds workload-level HTTP connection pooling, raw-socket quotas, opt-in egress policies, configurable CA trust, and updated Helm chart CRDs. ### Source excerpt wasmCloud 2.7 makes host component plugins bidirectional (plugins can call workload exports), multiplies warm-instance capacity with maxConcurrency, enables multi-backend binding by default, and hardens workload networking with quotas and private CA trust. ## How React Rendering Works and Why Memoization Is Often Not the First Fix DevFeed: [How React Rendering Works and Why Memoization Is Often Not the First Fix]() Original publisher: [Read original article]() Author: The T-Shaped Dev Published: 2026-07-28T06:10:09Z Content type: tutorial Language: en Sources: [The T-Shaped Dev]() Topics: [React](), [ui](), [Code](), [JavaScript](), [Development]() Tags: [code](), [component](), [context](), [javascript](), [react](), [render](), [state](), [ui]() ### AI overview This tutorial explains that a React render is a component function call, while DOM updates happen only during the commit phase. It identifies state changes, context changes, and new child elements from a parent as render triggers, and argues that moving state or restructuring children often helps before memoization. It also notes that StrictMode intentionally renders twice in development and that the compiler cannot move component state. ### Source excerpt One rule explains every React re-render. Get it right and memoization becomes the last fix, not the first. ## Pure Codename One Text Editing Without Native Overlays DevFeed: [Pure Codename One Text Editing Without Native Overlays]() Original publisher: [Read original article]() Author: Shai Almog Published: 2026-07-27T00:00:00Z Content type: article Language: en Sources: [CodeName One]() Topics: [ui](), [Code]() Tags: [component](), [formatting](), [gif](), [image](), [jpeg](), [native](), [port]() ### AI overview A new semantic port contract lets Codename One handle text painting, selection, rich editing, clipboard formats, and bidirectional layout while platform ports provide keyboard and input-method events. The opt-in path supports text composition, undo and redo, selection geometry, and multi-format clipboard content without a visible native field. ### Source excerpt A semantic port contract lets Codename One own text painting, selection, rich editing, clipboard formats, and bidirectional layout while the platform supplies keyboard and IME operations. ## Codename One Tests Statically Linked UI Against iOS 26 and Material 3 References DevFeed: [Codename One Tests Statically Linked UI Against iOS 26 and Material 3 References]() Original publisher: [Read original article]() Author: Shai Almog Published: 2026-07-17T00:00:00Z Content type: article Language: en Sources: [CodeName One]() Topics: [ui](), [iOS](), [Accessibility](), [SwiftUI](), [Compose]() Tags: [accessibility](), [benchmarks](), [component](), [design](), [ios](), [ios-26](), [native](), [os](), [simulator](), [swiftui](), [test](), [ui](), [update]() ### AI overview The article explains how Codename One statically links its UI components into native apps so operating-system updates cannot replace their widget implementations. It covers native-fidelity testing against iOS 26 and Material 3, Metal-based rendering, accessibility work, and the tradeoff that Codename One must reproduce design changes itself. ### Source excerpt Codename One now tests its statically linked UI against native iOS 26 and Material 3 references, so themes can move forward without an OS update changing your shipped app. ## TDD in Legacy Code - Maintainable Component Tests - Backend DevFeed: [TDD in Legacy Code - Maintainable Component Tests - Backend]() Original publisher: [Read original article]() Author: Valentina Jemuović Published: 2026-07-02T06:02:41Z Content type: tutorial Language: en Sources: [Optivem Journal]() Topics: [Back end](), [Test-driven development](), [legacy]() Tags: [api](), [backend](), [component](), [erp](), [legacy](), [legacy-code](), [refactor](), [tdd](), [tests]() ### AI overview A tutorial on refactoring brittle backend component tests that are coupled to a backend API and ERP system, with the goal of making them more maintainable. ### Source excerpt Many Backend Teams write unmaintainable Backend Component Tests - coupled to the Backend API and ERP. I'll show you how to refactor these brittle tests. ## Preventing Cypress Test Failures When Reloaded Elements Detach from the DOM DevFeed: [Preventing Cypress Test Failures When Reloaded Elements Detach from the DOM]() Original publisher: [Read original article]() Author: Gleb Bahmutov Published: 2026-06-17T04:00:00Z Content type: tutorial Language: en Sources: [Gleb Bahmutov]() Topics: [Cypress](), [Document Object Model (DOM)](), [navigation]() Tags: [blog-post](), [component](), [cypress](), [demo](), [how-to](), [navigation](), [products](), [repo](), [testing](), [verify]() ### AI overview This tutorial explains why Cypress end-to-end tests can fail when client-side navigation updates the page after a command has found an element. It demonstrates how delayed rendering can leave an old element attached to the test subject and recommends waiting for the expected component or DOM state before continuing the command chain. ### Source excerpt Have you ever encountered end-to-end test error "... failed because the page updated as a result of this command, but you tried to c ## WASI 0.3 Launched DevFeed: [WASI 0.3 Launched]() Original publisher: [Read original article]() Author: \["Bailey Hayes", "Yosh Wuyts"\] Published: 2026-06-11T00:00:00Z Content type: release Language: en Sources: [Bytecode Alliance]() Topics: [WebAssembly](), [toolchain]() Tags: [async](), [component](), [components](), [native](), [support](), [toolchain](), [wasi](), [webassembly]() ### AI overview WASI 0.3.0 has been ratified as a stable specification. It rebases WASI on the WebAssembly Component Model's native async primitives, making most changes from WASI 0.2 mechanical and simplifying interface signatures. Runtime and toolchain support is beginning to land. ### Source excerpt WASI 0.3 is official, and async is now native to WebAssembly Components. The WASI Subgroup voted to ratify WASI 0.3.0, rebasing WASI onto the WebAssembly Component Model's async primitives. The 0.3.0 specification is now stable, and runtime and toolchain support is landing now. ## Introducing new and improved reporting: How we are solving accessibility issue bloat and triage fatigue DevFeed: [Introducing new and improved reporting: How we are solving accessibility issue bloat and triage fatigue]() Original publisher: [Read original article]() Author: BrowserStack Team Published: 2026-06-10T04:51:54Z Content type: article Language: en Sources: [BrowserStack Blog]() Topics: [Accessibility](), [Testing](), [Website](), [Development]() Tags: [accessibility](), [component](), [deep-dive](), [false-positives](), [reports](), [testing](), [workflow]() ### AI overview BrowserStack introduces improved accessibility testing reports that group repeated or similar issues across pages, display confidence levels, and support guided bulk review. The changes aim to reduce issue bloat, help teams prioritize reliable violations, and cut triage time by up to 60%. ### Source excerpt Stop drowning in accessibility "issue bloat." BrowserStack's new reporting uses Intelligent Grouping and a Confidence Slider to turn thousands of redundant alerts into unique tasks. With Guided Bulk Review, you'll slash triage time by 60% and boost your score faster. ## 7 tips for using Figma Make credits more efficiently DevFeed: [7 tips for using Figma Make credits more efficiently]() Original publisher: [Read original article]() Author: Alexia Danton Published: 2026-05-22T12:00:00Z Content type: tutorial Language: en Sources: [Figma Blog]() Topics: [Figma](), [Code](), [ui]() Tags: [best-practices](), [code](), [component](), [context](), [cost](), [figma](), [prompting](), [request](), [screen](), [state](), [structure](), [tips](), [ui]() ### AI overview This tutorial presents seven practices for using Figma Make credits more efficiently. It recommends writing a complete initial prompt, keeping follow-up prompts focused and specific, building in stages, grouping related changes, and switching to direct editing for small visual adjustments. ### Source excerpt While everyone's talking about "tokenmaxxing," we've compiled seven best practices to help you build smarter--without prompting more--in Figma Make. ## Chat SDK now supports callback URLs on buttons and modals DevFeed: [Chat SDK now supports callback URLs on buttons and modals]() Original publisher: [Read original article]() Author: Josh Singh Published: 2026-05-20T00:00:00Z Content type: release Language: en Sources: [Vercel News]() Topics: [SDKs](), [Slack](), [Deployment]() Tags: [component](), [deployment](), [documentation](), [guide](), [payload](), [sdk](), [slack](), [workflow]() ### AI overview Chat SDK now supports callback URLs on buttons and modals, allowing Workflow runs to pause and resume after button clicks or form submissions. The callback endpoint receives the event or form payload, with support across platforms that have an official adapter and for modals on Slack and Teams. ### Source excerpt You can now pause a Workflow run on a Chat SDK card and resume it when someone clicks a button. The same flow works for form submissions. Buttons and modals accept a new callbackUrl prop, and the event payload is sent to that endpoint. To build a card like this, create a workflow webhook and pass its URL to each button's callbackUrl prop inside your component: For the component, the form data is in the payload. callbackUrl works for buttons on most platforms with an official adapter, and for modals on Slack and Teams. Read the documentation or walkthrough guide to start building. Read more ## Compose Unstyled 2.0 introduces a foundation for building Compose component libraries DevFeed: [Compose Unstyled 2.0 introduces a foundation for building Compose component libraries]() Original publisher: [Read original article]() Author: Alex Styl Published: 2026-05-14T00:00:00Z Content type: release Language: en Sources: [Composables - Concise, no-fluff video tutorials for Android developers]() Topics: [Compose](), [Design system](), [modules](), [Accessibility]() Tags: [accessibility](), [component](), [compose](), [design-system](), [modules](), [release]() ### AI overview Compose Unstyled 2.0 is presented as a foundation for building custom Compose component libraries. The release introduces composable component APIs, redesigned Dropdown and Tooltip APIs, separate modules, and a fully unstyled core with deprecated APIs removed. ### Source excerpt Compose Unstyled 2.0 is a new foundation for building your own Compose component library. ## Khronos Adds Middleware Insights to the OpenXR Extension Matrix DevFeed: [Khronos Adds Middleware Insights to the OpenXR Extension Matrix]() Original publisher: [Read original article]() Author: jphilips (jeff@khronosgroup.org) Published: 2026-04-07T13:00:00Z Content type: article Language: en Sources: [Blogs Khronos Blog]() Topics: [Extension]() Tags: [api](), [blog](), [component](), [developers](), [extension](), [improvements](), [insights](), [middleware](), [openxr](), [visibility]() ### AI overview The Khronos OpenXR working group expanded its Extension Matrix with self-reported support data from middleware providers. The update gives developers more visibility into extension availability across the XR stack, while support may still vary by runtime and device. ### Source excerpt The Khronos OpenXR working group has expanded its Extension Matrix to include self-reported data from middleware providers. Developers now have a clearer view of what's available across the broader XR stack. ## How we rebuilt the foundations of component instances DevFeed: [How we rebuilt the foundations of component instances]() Original publisher: [Read original article]() Author: Naomi Jung Published: 2026-03-17T20:00:00Z Content type: article Language: en Sources: [Figma Blog]() Topics: [Figma](), [Design system](), [reactive](), [systems]() Tags: [architecture](), [component](), [design-systems](), [figma](), [reactive]() ### AI overview Figma describes replacing the decade-old Instance Updater architecture for component instances with a reactive foundation. The change made common operations in large design systems up to 50% faster and supports more dynamic features as components become more complex. ### Source excerpt By replacing a decade-old architecture with a reactive foundation, we made common operations in large design systems up to 50% faster and unlocked a new way to build dynamic features. ## Bridging two JSX runtimes: How we solved Astro's React children problem DevFeed: [Bridging two JSX runtimes: How we solved Astro's React children problem]() Original publisher: [Read original article]() Author: Kyle Finken Published: 2026-03-10T00:00:00Z Content type: article Language: en Sources: [Mintlify Blog]() Topics: [Astro](), [React](), [MDX](), [React Component](), [render]() Tags: [astro](), [bridging](), [component](), [components](), [engineering](), [mdx](), [react](), [render](), [solved]() ### AI overview Mintlify describes how its Astro integration addressed a JSX runtime mismatch that caused compound React components to lose their children during hydration in Astro's MDX pipeline. ### Source excerpt How Mintlify solved a fundamental JSX runtime mismatch to make compound React components work inside Astro's MDX pipeline. ## OLX Masterclass Frontend 2026 DevFeed: [OLX Masterclass Frontend 2026]() Original publisher: [Read original article]() Author: Isaac Queiroz Published: 2026-02-25T16:16:00Z Content type: news Language: en Sources: [OLX]() Topics: [Front end](), [Model Context Protocol](), [Development](), [CSS](), [React](), [Figma](), [repo](), [configuration]() Tags: [2026](), [agents](), [ai](), [code](), [coding](), [component](), [configuration](), [css](), [development](), [event](), [figma](), [frontend](), [frontend-development](), [masterclass](), [mcp](), [mcps](), [model-context-protocol](), [olx](), [react](), [repo]() ### AI overview OLX announces its 2026 Frontend Masterclass, featuring three sessions on MCP integrations and Figma-to-React workflows, new CSS capabilities, and managing localized websites for multiple brands from a single repository. ### Source excerpt The always-evolving challenges of OLX create a rich environment for innovation, experimentation, and knowledge sharing. In our 2026 Frontend Masterclass, we have three sessions that will shed light on our current development flow. Join us on March 3rd, 2026, from 6:00 pm to 9:00 pm at our OLX Offices in Poznań! Do you want to join us and know what's trending in the latest frontend technology? Check the event information and join here! Can't join it in person? Sign in to this form to receive the online recording of the session! Our Agenda With a broad schedule, our speakers will deliver a mix of technical presentations and demonstrations on multiple subjects. MCP Servers in Action: From Figma Design to React Component in Minutes by Karol Grabowski Part of what changed in our day-to-day flow is how AI is always available to help us. AI assistants and agents are powerful out-of-the-box tools; we can augment our reach by configuring Model Context Protocols (MCPs) to take our setup a step further. Join Karol to explore how the Model Context Protocol turns AI assistants into powerful development partners with direct access to your tools. This talk covers the MCP ecosystem, real OLX integrations, and includes a live coding session demonstrating the Figma-to-code workflow. CSS is no longer "this simple" -- it got _layers_, quite literally by Tomasz "Comandeer" Jakut At the same time that we advance with AI and multiple experiments to learn from our users and make our flows as pleasant as possible, we are still styling our components with the usual suspects, right? Not always! Join Tomasz Jakut and deep dive into CSS's new capabilities that can redefine how we approach styling websites: from @Layer and nesting to container queries, scoped styles, and user preferences. New native features can refresh well-known techniques and make others obsolete. One-product, three brands -- Our strategy for serving different countries from a single repo by Lilian Galezewska We all know how OL ## Angular v20 Custom MatPaginator Styling DevFeed: [Angular v20 Custom MatPaginator Styling]() Original publisher: [Read original article]() Author: Eduard Krivanek Published: 2026-01-30T09:30:45Z Content type: tutorial Language: en Sources: [Daniel Glejzner]() Topics: [Angular](), [angular material](), [Code]() Tags: [angular](), [angular-material](), [article](), [code](), [component](), [configuration](), [events](), [how-to](), [ssr]() ### AI overview A tutorial updates a custom Angular Material MatPaginator styling directive for Angular v20. It explains how to create a bubble-style paginated table, handle changing data length with signals and effects, and avoid direct DOM APIs while supporting server-side rendering. ### Source excerpt One of my more popular articles that I've published is Angular: MatPaginator Custom Styling, wrapping up around 17K views, which shows how to transform Angular Material's paginator (on a mat-table) using a custom directive to make it look more appealing. I decided to update this ## Introduction to Fuzzing ESP-IDF components DevFeed: [Introduction to Fuzzing ESP-IDF components]() Original publisher: [Read original article]() Author: John Lee Published: 2026-01-07T00:00:00Z Content type: tutorial Language: en Sources: [Blog on Developer Portal]() Topics: [ESP-IDF](), [Fuzzing/Fuzz testing](), [Testing](), [Vulnerabilities](), [c/c++]() Tags: [blog](), [c-c-plus-plus](), [c-plus-plus](), [component](), [embedded](), [esp-idf](), [fuzzing](), [how-to](), [security](), [testing](), [vulnerabilities](), [vulnerability]() ### AI overview This article introduces fuzzing for ESP-IDF components and embedded libraries. It explains how to fuzz host-compiled code with sanitizers, compares black-box, grey-box, and white-box approaches, and outlines workflows using a basic mutator, AFL++, and protocol-focused harnesses. ### Source excerpt This article introduces fuzzing -- a technique for finding vulnerabilities -- and demonstrates practical workflows and lessons learned for ESP-IDF components and embedded libraries in general. ## Testing Loading Skeletons DevFeed: [Testing Loading Skeletons]() Original publisher: [Read original article]() Author: Gleb Bahmutov Published: 2025-12-26T05:00:00Z Content type: tutorial Language: en Sources: [Gleb Bahmutov]() Topics: [Testing](), [Cypress](), [CSS](), [Web Development]() Tags: [component](), [css](), [cypress](), [map](), [products](), [property](), [test](), [testing]() ### AI overview A tutorial on testing loading skeletons with Cypress. It covers verifying that a skeleton appears while data loads, checking its position against the loaded content, and fixing CSS that causes layout shifts. ### Source excerpt Loading skeletons are displayed while the real data is loading. For example, the login passwords are displayed after 1 second in the GIF ## Advanced techniques for porting libraries to ESP-IDF components DevFeed: [Advanced techniques for porting libraries to ESP-IDF components]() Original publisher: [Read original article]() Author: John Lee Published: 2025-11-24T00:00:00Z Content type: tutorial Language: en Sources: [Blog on Developer Portal]() Topics: [ESP-IDF](), [Library](), [AWS IoT Core](), [OpenSSH](), [WebSocket](), [aio](), [CMake](), [make](), [POSIX]() Tags: [blog](), [cmake](), [compiler](), [component](), [components](), [esp-idf](), [feature-flags](), [library](), [linux](), [mqtt](), [porting](), [posix](), [ssh](), [systems](), [techniques]() ### AI overview This follow-up article presents advanced techniques for porting larger libraries, particularly those designed for Linux or POSIX systems, into reusable ESP-IDF components. It covers assessing reusable code, adapting build systems and port layers, configuration, header injection, linker wrapping, and compiler-warning management, with examples including asio, mosquitto, libssh, and libwebsockets. ### Source excerpt This article follows up on the article 'Porting a library to an ESP-IDF component' and shows some advanced tips and tricks when porting larger libraries into ESP-IDF components. ## What Now? Handling Errors in Large Systems DevFeed: [What Now? Handling Errors in Large Systems]() Original publisher: [Read original article]() Author: Marc Brooker Published: 2025-11-20T00:00:00Z Content type: article Language: en Sources: [Marc Brooker's Blog](), [Marc Brooker's Blog]() Topics: [systems](), [Resilience](), [Rust](), [Processes](), [autoscaling](), [Amazon Web Services](), [Serverless](), [Erlang](), [Containers](), [servers]() Tags: [architecture](), [autoscaling](), [aws](), [component](), [errors](), [http](), [outage](), [process](), [resilience](), [rust](), [server](), [serverless](), [servers](), [systems]() ### AI overview An analysis of error handling in large systems, using Rust's Result and unwrap as a starting point. It argues that whether a component should crash is a system-wide architectural decision shaped by failure correlation, error-handling layers, business logic, and the value of continuing with a last-known-good configuration or data version. ### Source excerpt What Now? Handling Errors in Large Systems More options means more choices. Cloudflare's deep postmortem for their November 18 outage triggered a ton of online chatter about error handling, caused by a single line in the postmortem: .unwrap() If you're not familiar with Rust, you need to know about Result, a kind of struct that can contain either a successful result, or an error. unwrap says basically "return the successful results if there is one, otherwise crash the program"1. You can think of it like an assert. There's a ton of debate about whether asserts are good in production2, but most are missing the point. Quite simply, this isn't a question about a single program. It's not a local property. Whether asserts are appropriate for a given component is a global property of the system, and the way it handles data. Let's play a little error handling game. Click the ✅ if you think crashing the process or server is appropriate, and the ❌ if you don't. Then you'll see my vote and justification. One of ten web servers behind a load balancer encounters uncorrectable memory errors, and takes itself out of service. ✅ ❌ Your vote: My vote: ✅ Uncorrectable memory errors are independent, and do not depend on user-provided content. In the presence of bad memory, it's impossible for a program to proceed safely. Taking the machine out of service is the safest course of action. One of ten multi-threaded application servers behind a load balancer encounters a null pointer in business logic while processing a customer request. ✅ ❌ Your vote: My vote: ❌ Customer requests triggering bugs in business logic isn't a good reason to bring the whole server down. Instead, fail that particular request (returning an HTTP 5xx error), and continue with other user requests. In approaches like Erlang, or even Lambda, it may be the right approach to crash the whole application in response to a bad request, because this crash is handled at a higher layer in the architecture. This is also why I pr ## Porting a library to an ESP-IDF component DevFeed: [Porting a library to an ESP-IDF component]() Original publisher: [Read original article]() Author: John Lee Published: 2025-10-20T00:00:00Z Content type: tutorial Language: en Sources: [Blog on Developer Portal]() Topics: [ESP-IDF](), [Library](), [Testing](), [ide](), [Code](), [Hardware](), [Template](), [GitHub]() Tags: [app](), [blog](), [build](), [build-system](), [code](), [component](), [esp-idf](), [esp-idf-component](), [esp-idf-extension-for-vs-code](), [esp32-c3](), [esp32c3](), [github](), [hardware](), [how-to](), [porting](), [repo](), [testing]() ### AI overview This tutorial explains how to port an external library into a reusable ESP-IDF component. Using tinyexpr, it covers obtaining the source code, creating a test project and component, configuring the build system, resolving compatibility issues, and testing on an ESP32-C3 board. ### Source excerpt This article shows how to port an external library into an ESP-IDF project by converting it into a reusable component. Using tinyexpr as an example, it covers obtaining the source code, creating a new project, building a component, configuring the build system, and testing on hardware. [Next page]()