npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2025 – Pkg Stats / Ryan Hefner

app-studio

v0.5.69

Published

App Studio is a responsive and themeable framework to build cross platform applications

Downloads

825

Readme

App-Studio

App-Studio is a powerful React-based library designed to simplify the process of building responsive, interactive, and visually consistent web applications. It provides CSS design props for layout, spacing, sizing, shadows, event management, and theming.

Features

  • 🌈 Add styled props to your application
  • 📦 A set of simple and powerful React components
  • 🌍 Internationalization support for dozens of languages
  • 🎨 Powerful theme customization in every detail

Table of Contents

2. Installation

To install App-Studio, run the following command:

npm install app-studio  --save

3. Core Components

Element

The Element component is the base for all other components. It handles responsiveness, shadows, margins, padding, and more.

Key Features

  • Sets both width and height with the size prop.
  • Defines styles for different CSS events with the on prop.
  • Defines responsive styles for different media queries with the media prop.
  • Applies shadow effects with the shadow prop.

Usage

<Element backgroundColor="color.blue" padding={10}>
  This is an element
</Element>

View

The View component extends the basic div HTML element. It's a generic container used to create various layouts.

Key Features

  • Provides a flexible way to structure content.
  • Supports all Element props.

Usage

<View backgroundColor="color.red" color="color.white" padding={20}>
  This is a view
</View>

Text

The Text component extends the basic div HTML element for rendering text content.

Key Features

  • Provides text-specific styling options.
  • Supports all Element props.

Usage

<Text color="color.blue">This is a text</Text>

Form

The Form component extends the basic form HTML element and provides nested Form.Button and Form.Input components.

Key Features

  • Simplifies form creation and management.
  • Supports all Element props.

Usage

<Form>
  <Form.Input placeholder="Enter your name" />
  <Form.Button>Submit</Form.Button>
</Form>

Image

The Image component extends the basic img HTML element for displaying images.

Key Features

  • Supports responsive image loading with media.
  • Applies shadow effects with shadow.
  • Handles events with on.

Usage

<Image src="url_to_image" alt="description" />

4. Responsive Design

App-Studio offers two primary methods for implementing responsive design: the media prop and the useResponsive hook.

Media Prop

The media prop allows you to specify different styles for various devices or screen sizes without causing component re-renders.

Example

<View size={100} 
  media={{
  mobile: { backgroundColor: 'color.green' },
  tablet: { backgroundColor: 'color.yellow' },
  xl: { backgroundColor: 'color.blue' },
  }}  
/>

useResponsive Hook

The useResponsive hook provides information about the current screen size and device type based on defined breakpoints and devices.

Example

const { screen, on } = useResponsive();

return (
  <View size={100} backgroundColor={responsive[screen]}>
  {screen} - mobile: {on('mobile') ? 'yes' : 'no'}
  </View>
);

To use these responsive features, wrap your app with ResponsiveProvider:

<ResponsiveProvider 
  breakpoints={{
  xs: 0,
  sm: 340,
  md: 560,
  lg: 1080,
  xl: 1300,
  }}
  devices={{  
  mobile: ['xs', 'sm'],
  tablet: ['md', 'lg'],
  desktop: ['lg', 'xl']
  }}
>
  <App />
</ResponsiveProvider>

5. Event Management

App-Studio provides an intuitive way to manage CSS events through the on prop. This feature allows you to style elements based on various interactive states.

Example

<View 
  backgroundColor="grey" 
  padding={20}
  on={{ hover: { backgroundColor: 'blue.100' } }}
>
  Hover over me
</View>

Supported events include hover, active, focus, and disabled.

6. Theming

App-Studio's theming system allows you to maintain a consistent look across your application using the ThemeProvider component.

Setting up the Theme

const theme = {
  main: { primary: '#fff7ed' },
  components: { button: { background: '#fff7ed' } }
};

const colors = {
  main: { blue: '#94a3b8' },
  palette: {
  blueGray: {
    50: '#f8fafc',
    // ... other shades
    900: '#0f172a'
  }
  }
};

Using ThemeProvider

<ThemeProvider theme={theme} colors={colors}>
  <App />
</ThemeProvider>

Applying Theme in Components

<View backgroundColor="color.blue">
  <Text color="theme.primary">Hello</Text>
  <Button backgroundColor="theme.button.background">Click me</Button>
</View>

7. Custom Hooks

useMount

The useMount hook executes logic when a component first mounts.

Usage

import { useMount } from '@your-org/app-studio';

const MyComponent = () => {
  useMount(() => {
  console.log('MyComponent mounted');
  });

  return <div>MyComponent</div>;
};

8. Design Props

App-Studio provides additional props to better manage design integration in CSS. These props offer more control over the styling of components, including layout, spacing, and sizing.

Example

<View 
  backgroundColor="theme.primary" 
  padding={20}
  margin={10}
  width={200}
  height={100}
>
  I am a View component with custom styling
</View>

Shadow Prop

The shadow prop is used to manage shadows in CSS. It takes a number or a string as a value, which defines the shadow effect to apply to the component.

<View 
  backgroundColor="theme.primary" 
  padding={20}
  shadow={6}
>
  I have a shadow
</View>

9. Animation

App-Studio provides a powerful animation system through the Animation object. Animations can be applied to any Element or its derivatives using the animate prop.

Usage

// Basic animation
<View 
  animate={Animation.fadeIn({
    duration: '1s',
    timingFunction: 'ease',
    iterationCount: '1'
  })}
/>

// Animation sequence
const sequence = [
  {
    from: { opacity: 0, transform: 'translateY(-100px)' },
    to: { opacity: 1, transform: 'translateY(0)' },
    duration: '2s',
    timingFunction: 'ease-in'
  },
  {
    from: { opacity: 1, transform: 'translateY(100px)' },
    to: { opacity: 0, transform: 'translateY(0)' },
    duration: '2s',
    timingFunction: 'ease-out'
  }
];

<View animate={sequence} />

// Animation on hover
<View
  on={{
    hover: {
      animate: Animation.rotate({ duration: '1s', timingFunction: 'ease' })
    }
  }}
/>

Available Animations

All animations are available through the Animation object:

  • Animation.fadeIn()
  • Animation.fadeOut()
  • Animation.bounce()
  • Animation.rotate()
  • Animation.pulse()
  • And many more...

Basic Usage

To apply an animation to a component, use the animate prop with an animation object:

import { View, Animation } from 'app-studio';

function Example() {
  return (
    <View
      animate={Animation.fadeIn()} // Fades in the view
      backgroundColor="theme.primary"
      padding={20}
    >
      This view will fade in
    </View>
  );
}

Available Animations

App-Studio comes with a set of pre-defined animations that you can use out of the box:

Transition Animations

  • fadeIn / fadeOut
  • slideInLeft / slideInRight / slideInUp / slideInDown
  • zoomIn / zoomOut

Transform Animations

  • rotate
  • scale
  • translate

Effect Animations

  • bounce
  • pulse
  • flash
  • shake
  • swing
  • rubberBand
  • wobble
  • flip
  • heartBeat
  • rollIn / rollOut
  • lightSpeedIn / lightSpeedOut
  • hinge
  • jackInTheBox

Each animation function accepts parameters to customize the duration, timing function, and other properties.

Animation Properties

Each animation function accepts an object with the following properties:

  • duration: Length of the animation (e.g., '1s', '500ms')
  • timingFunction: CSS timing function (e.g., 'ease', 'linear', 'ease-in-out')
  • iterationCount: Number of times to play the animation (number or 'infinite') // e.g., '1', 'infinite'

10. Advanced Usage

Here's an advanced example showcasing various features of App-Studio, including animations:

import { ThemeProvider, ResponsiveProvider, View, Span, Text, Button, Animation } from 'app-studio';

const theme = {
  main: { primary: '#fff7ed' },
  components: { button: { background: '#fff7ed' } }
};

const colors = {
  main: { blue: '#94a3b8' },
  palette: { blueGray: { 500: '#64748b' } }
};

function Example() {
  return (
    <ResponsiveProvider>
      <ThemeProvider theme={theme} colors={colors}>
        <Span
          animate={Animation.fadeIn({duration: '1s',timingFunction:'ease-out'})}
          backgroundColor="color.blue"
          padding={10}
          media={{
            mobile: {
              padding: 20
            }
          }}
        >
          Base element
        </Span>
        <View 
          animate={Animation.slideInRight()}
          backgroundColor="theme.primary" 
          margin={10}
          width={200}
          on={{ hover: { backgroundColor: 'color.blueGray.500' } }}
        >
          Hover to change color
        </View>
        <Button 
          animate={Animation.pulse({timingFunction:'infinite'})}
          backgroundColor="theme.button.background"
        >
          Click here
        </Button>
        <Text 
          animate={Animation.typewriter('Hello', 100)}
          color="theme.primary"
        />
      </ThemeProvider>
    </ResponsiveProvider>
  );
}

11. Contributing

We welcome all contributions to App-Studio. Please read our contributing guide and let's build a better App-Studio together.

For more detailed information on contributing, including how to apply for being a collaborator, please refer to our GitHub repository.

12. License

App-Studio is available under the MIT license. See the LICENSE file for more info.


For the latest updates, changelog, and more detailed information, please visit our GitHub repository.