Code Editor | Quarkly

Code Editor

The second most important work area in Quarkly is the code editor. It displays all the components and their props that you can see on the screen. You can also work with the components, their props, and values much faster than on the page. You need to be able to follow JSX syntax, know the set of available components, CSS props and values.

Components

List of Primitives:

<Box/>
<Button/>
<Hr/>
<Icon/>
<Image/>
<Input/>
<List/>
<Text/>

List of Quarkly UI Components:

<Formspree/>
<GoogleMap/>
<Menu/>
<Section/>
<SocialMedia/>
<Stack/>
<StackItem/>

States / Pseudo-classes

Pseudo-classes are added through a prefix in the code, for example, hover-opacity='1'. Available pseudo-classes are:

hover
focused
active, for a button and an input
disabled, for a button
link, for a link
visited, for a link

Example of how to add a component with properties:

<Box width='100px' height='100px' background-color='blue' color='white'>Hello World</Box>

The props values for the breakpoint are set through a prefix, for example, md-width=’50%’.

Spectrum