A demo repository to play around with Vivid! Styled with Tailwind CSS

Overview

vivid-demo

A demo repository to play around with Vivid! Mess around with a copy of our landing page to see how Vivid works! Learn more about Vivid at www.vivid.lol. If you want to test out an alpha version of Vivid on your own project, check out docs.vivid.lol!

Getting started

Simply clone this repository, install the necessary dependencies, and test Vivid out right away. We recommend Yarn, but if you're using npm, be sure to delete the yarn.lock file after cloning.

With Yarn:

git clone https://github.com/aryamankha/vivid-demo.git
cd vivid-demo
yarn
yarn dev 

With npm:

git clone https://github.com/aryamankha/vivid-demo.git
cd vivid-demo
npm install
npm run dev

Functionality

Vivid lets you quickly find, edit, and iterate on components in your browser.

Inspecting elements

You can hold down Option (Windows:Alt) while hovering over elements to replicate inspect functionality.

Selecting Components

You can click on any elements by Option clicking (Windows:Alt) clicking on any element. You can move between components and reach hidden components with the arrow keys: "inward" to a child component with , "outward" to a parent component with , and between adjacent sibling components with and .

Executing Commands

Any time you select a component, the code pane will pop up. Any edits you make to the code pane will be reflected in your browser and in your code. If you want to edit styling even faster, you can pull up the command palette with CommandK (Windows:CtrlK). Typing a class in the command palette will add that Tailwind class to the selected component. If the class you are trying to add conflicts with an existing class, Vivid will replace the old class with your new input. If you type out a class that the component already has, Vivid will remove that class.

Known Issues

  1. The app does (infrequently) crash. If you just refresh your browser, it will almost always go away. All your changes get autosaved to your code, so you don't have to worry about losing your edits.
  2. Library components show up a bit funky in the Vivid code pane. Working on it!
  3. If you add a non-existent class from the command palette, Vivid won't check to make sure it's a valid Tailwind class before adding it.
  4. If you're editing in both Vivid and your IDE, you must save your changes in your IDE before going back to Vivid. Otherwise, the files created from your IDE and Vivid will diverge and you'll have to handle conflicts.
You might also like...

Trivia-Quiz é uma aplicação baseada no jogo Perguntados, em que consiste em um quiz de diferentes questões. Feito com ReactJS, JavaScript, Styled-Components, Axios, React-Feather e Open Trivia Database.

Trivia-Quiz é uma aplicação baseada no jogo Perguntados, em que consiste em um quiz de diferentes questões. Feito com ReactJS, JavaScript, Styled-Components, Axios, React-Feather e Open Trivia Database.

TRIVIA-QUIZ Trivia-Quiz é uma aplicação baseada no jogo Perguntados, em que consiste em um quiz de diferentes questões. Feito com ReactJS, JavaScript,

Feb 6, 2022

Bookstore app built using React, Redux, and Styled Components

Bookstore app built using React, Redux, and Styled Components

Bookstore Bookstore is an app that allows you to display a list of added books, add new book and remove a book. It is built using React, Redux, and St

Dec 12, 2022

A SolidJS starter template with solid-labels, solid-sfc and solid-styled

solid-sfc-styled-labels-starter This is a SolidJS starter template for easily setting up solid-sfc, solid-styled and solid-labels. Development Install

Mar 25, 2022

💻 Build terminal styled websites in minutes!

💻 Build terminal styled websites in minutes!

💻 LiveTerm - build terminal styled websites in minutes! Highly customizable, easy-to-use, and minimal terminal styled website template, powered by Ne

Dec 31, 2022

A Gatsby-based starter theme with e-commerce styled components

A Gatsby-based starter theme with e-commerce styled components

This beautiful theme from the Matter Design Team gives you the styling and scaffolding for your next e-commerce site. You can customize to your heart'

Jan 3, 2023

In this project, I built a simple HTML list of To Do tasks. The list is styled according to the specifications listed later in this lesson. This simple web page is built using webpack and served by a webpack dev server.

Awesome books:JavaScript Using Modules In this project, I built a simple HTML list of To Do tasks. The list is styled according to the specifications

Nov 25, 2022

Next.js + Redux + styled-components + Express = 😇

Next.js redux starter An opinionated Next.js starter kit with Express, Redux Toolkit, styled-components, and react-testing-library. About Next.js is a

Dec 16, 2022

Responsive no-jQuery pure JS/CSS Lightbox for images, no dependencies, 10kb unminified source code, with demo

Responsive no-jQuery pure JS/CSS Lightbox for images, no dependencies, 10kb unminified source code, with demo

img-lightbox Responsive no-jQuery pure JS/CSS Lightbox for images, no dependencies, 10kb unminified source code, with demo Demo codepen jsfiddle jsbin

Jun 13, 2022

♦ Crowd funding project using Smart Contracts on the Ethereum. Created with Next.js and Tailwind CSS.

♦ Crowd funding project using Smart Contracts on the Ethereum. Created with Next.js and Tailwind CSS.

Crowdcoin ♦ Crowd funding project using Smart Contracts on the Ethereum. Created with Next.js and Tailwind CSS. Project from "Ethereum and Solidity: T

Dec 14, 2022
Owner
Aryaman Khandelwal
Aryaman Khandelwal
A daily print-and-play roguelike adventure you can play offline.

Chronicles of Stampadia A print-and-play roguelike with a new adventure every day! Play today's adventure | Read the manual | Learn how to play | Disc

Francesco Cottone 36 Oct 15, 2022
Danger is near (play to earn game, gamefi on near chain testnet) - user play as a fireknight in a PIXELVERSE world who go to forest and kill monster.

Danger is near (play to earn game, gamefi on near chain testnet) - user play as a fireknight in a PIXELVERSE world who go to forest and kill monster. User can earn $DANGER token and score to compete with others user.

Jason Factor 21 Dec 30, 2022
Api for playing around with dummy data. Feel free to use it in your demo projects, tutorials, or testing tasks.

dummy-api Api similar to dummy-api Api for playing around with dummy data. Feel free to use it in your demo projects, tutorials, or testing tasks. All

Donald Wu 4 Jan 7, 2023
⏪ Rewinds – Remix Tailwind Starter Kit with Tailwind CSS, Headless UI, Radix UI, and more

⏪ Rewinds – Remix Tailwind Starter Kit Rewinds is a Remix starter kit with Tailwind CSS v3 family of libraries. This is an example demo to combine the

M Haidar Hanif 81 Dec 24, 2022
This a collaborative repository to us play with javascript basics. Welcome here!

➡️ PT-BR A HacktoberFest project to put your frontend skills to the test. About This is a beginner-friendly repository for educational purposes that w

Ana Silveira 14 Nov 22, 2022
Nftix-demo-ui - Demo UI used in my NFT course on Egghead.io

NFTix Demo UI This repository contains the UI used for my Egghead course on building a NFT ticketing system ?? ?? If you're watching the videos, use t

Ryan Harris 10 Dec 17, 2022
A repository of a Cypress testing demo

adeoweb-cypress-demo This is a repository of a Cypress testing demo. Based on adeoweb.biz website case study. What is this talk We will ?? live-code a

Eimantas 3 Mar 24, 2022
A Tailwind plugin that allows to create multiple groups utilities such as group-card or group-1 and works with Tailwind 3 features and all variations.

Tailwind Labeled Groups A plugin that allows to create multiple groups utilities such as group-card or group-1 and works with Tailwind 3 features and

Max 18 Nov 21, 2022
This is our second school project in HTML 5, CSS 3 and JS. In this website you can find very interesting information about the countries around the world.

Team Geonomy ?? About This is a website about with interatcive map and very interesting information about different coutries ??️ Used technologies Use

Stanislav Tashev 33 Nov 23, 2022
LinkedIn-Clone - a LinkedIn clone with firebase, redux and styled components

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: ya

Asher Price 1 Jan 3, 2022