# Introducing w3ui At web3.storage, we're building tools for the [data layer][data-layer-blog-post] of the next generation of web applications. Today we're excited to share something for those of you building the "view layer" of web3. [`w3ui`][w3ui-docs-site] is our "batteries included" toolkit for frontend web developers that makes it easy to integrate your favorite JavaScript framework with our new data platform. ## The headless way We want to make web3.storage accessible to all web developers, which means embracing the diversity of frameworks and libraries in the modern JavaScript ecosystem. Using a set of "vanilla" JavaScript modules to define the core functionality, we've built headless components for React, Solid, and Vue that make it simple to add web3.storage to your app, and we're hard at work on a React Native version for mobile devices. If you're new to headless components, they're a design pattern that splits user interface components into pieces, so that the core logic of a UI component is independent of how things are presented to the user. In other words, a headless component defines how things work, letting another component decide how things look and feel. Using headless components lets you pull the logic and state management for the UI into an isolated, easily testable core, while giving designers total flexibility to build the "human interface" that makes sense for their project. For our beta release, we've focused on three components that enable your users to create and manage their decentralized identity, upload data to web3.storage, and view upload history. ### Keyring Our new platform features an authorization protocol called [UCAN](https://ucan.xyz) (User Controlled Authorization Networks), a new approach to authorization that puts users in control of their own digital identity. UCANs work using public key cryptography, with each user generating their own keys. When you register your identity with web3.storage, you send us the public half of a key pair and keep the private key only on your own device. The w3ui [`keyring` component][w3ui-site-keyring] handles all the details of creating and storing keys, and it includes the email registration flow for registering your public identity with the web3.storage platform. To get a feel for how it works, check out the [React example on CodeSandbox](https://codesandbox.io/s/w3ui-example-react-sign-up-in-4mq24l)! For more examples, including Solid and Vue, see the [keyring page on the w3ui docs site][w3ui-site-keyring]. ### Uploader Once you've got an authorized key in your keyring, you're ready to upload data to the web3.storage platform. The [`uploader` component][w3ui-site-uploader] provides functions for uploading data to web3.storage, including client-side conversion of files and directories into an IPFS-native format. All you need to do is call `uploader.uploadFile` and pass in a `File` object, or call `upload.uploadDirectory` if you have a collection of files. The uploader component will encode your files into content-addressed blocks, pack the blocks into one or more Content Archives (CARs), and send the CARs to [Elastic IPFS][elastic-ipfs]. If your software already uses IPFS, you may want to do your own encoding of your data, for example, because you're using [IPLD][ipld] to represent a graph of structured data. In that case, just create a CAR with your data and use `uploader.uploadCarChunks` to send it. Play with the [React CodeSandbox](https://codesandbox.io/s/w3ui-example-react-file-upload-6v97r5), or head to the [uploader docs][w3ui-site-uploader] to learn more. ### Uploads list Now that you've uploaded some data, you can view and manage your uploads using the uploads list component. The uploads list component provides everything you need to display a sorted, paginated list of all the uploads made to your account. The uploads list [React CodeSandbox](https://codesandbox.io/s/w3ui-example-react-uploads-list-zkdm5y) and [docs page][w3ui-site-uploads-list] are here to help you get started. ## Fork it, tweak it, ship it Headless UI components like the ones in w3ui give you freedom and flexibility to create the perfect UI for your applications. But maybe you just want something you can grab and use right away, without needing to code up a bespoke UI? We've built [a collection of simple standalone examples](https://github.com/web3-storage/w3ui/tree/main/examples) for each of the core components that you can use as inspiration for writing your own UI components. Or, if you just want to hit the ground running, feel free to clone the examples and use them as the foundation for your next app. [w3ui-docs-site]: https://beta.ui.web3.storage [w3ui-site-keyring]: https://beta.ui.web3.storage/wallet [w3ui-site-uploader]: https://beta.ui.web3.storage/uploader [w3ui-site-uploads-list]: https://beta.ui.web3.storage/uploads-table [data-layer-blog-post]: https://blog.web3.storage/posts/say-hello-to-the-data-layer-1-3-intro-to-web3-storage [forever-note-blog-post]: https://blog.web3.storage/posts/forever-note [elastic-ipfs]: https://github.com/elastic-ipfs [ipld]: https://ipld.io/