# Understand components > Discover the power and flexibility of components in PandaSuite, which enable creative freedom through features like synchronization and customization, ideal for application development. https://docs.pandasuite.com/getting-started/understand-components/ **Discover the power of components and what you can make with them.** [Video: Introduction to PandaSuite components and what you can make with them](https://www.youtube.com/embed/YbhVTMUZtbw?&hl=en&cc_lang_pref=en&cc_load_policy=1) ## Everything is component In PandaSuite, each feature is represented by a component: [Pop-up](https://docs.pandasuite.com/essentials/components/pop-up/), [Scrolling Area](https://docs.pandasuite.com/essentials/components/scrolling-area/), [GPS](https://docs.pandasuite.com/essentials/components/gps-geo-fencing/)... This way each feature is flexible, customizable, and synchronizable with another feature. This is how PandaSuite gives you the most creative freedom. 🚀 Like Legos®, each component is composed in the same way, in the form of a common, abstract principle that allows the connection between them, without being specific to those same components. There are several types of components: - Graphic components ([HD Image](https://docs.pandasuite.com/essentials/components/hd-image/), [Drag & Drop](https://docs.pandasuite.com/essentials/components/drag-and-drop/)...), - Layout components ([Flexbox](https://docs.pandasuite.com/essentials/components/flexbox/), [Group](https://docs.pandasuite.com/essentials/components/group/)...), - System components ([GPS](https://docs.pandasuite.com/essentials/components/gps-geo-fencing/), [Beacon Sensor](https://docs.pandasuite.com/essentials/components/beacon-sensor/), [Motion Sensor](https://docs.pandasuite.com/essentials/components/motion-sensor/)) - and Data components ([Collection List](https://docs.pandasuite.com/essentials/data/collection/), [Authentication](https://docs.pandasuite.com/essentials/components/authentication/)...). [Image: List opened by the Components icon: Gallery, Multi-state, Pop-up, Web…, then Group, Scrolling Area, Flexbox, and the sensors] Click on the Components icon to get the full list. You can add components anywhere you want in your application: in a [screen](https://docs.pandasuite.com/essentials/layout/screens/), in a [foreground](https://docs.pandasuite.com/essentials/project-properties/foreground-and-background/) and even at the project level. When a component is added at the Project level, it is active throughout the application (which can be useful for a [Timer](https://docs.pandasuite.com/essentials/components/timer/) or the [HTTP](https://docs.pandasuite.com/essentials/components/http/) component). When you add a component, it appears in the Objects list at the bottom left. Non-visual components are isolated from other components by a separator and are placed at the bottom of the list. You can rename your components. [Image: Objects list of the Invite screen: the pop-up, button, text input and background, then the SMS request HTTP component below the separator] The non-visual HTTP component sits below the separator, at the bottom of the Objects list. ## Characteristics of a component Every component has the same characteristics: - It has properties - It has [triggers](https://docs.pandasuite.com/essentials/interactions/triggers/) to start an action - It can be the target of [one or more actions](https://docs.pandasuite.com/essentials/interactions/interactive-actions/) - It is customizable using [markers](https://docs.pandasuite.com/essentials/interactions/markers/) - It can be [synchronized](https://docs.pandasuite.com/essentials/components/synchronization/) with all other components - It reacts according to [languages](https://docs.pandasuite.com/essentials/project-properties/languages-and-localization/) - It can receive [data](https://docs.pandasuite.com/essentials/data/dynamic-content/). ## Edit a component To edit the content of a component, you have to go inside this component: there is a notion of depth. To go inside, double-click on the component. This component becomes the context. The breadcrumb trail, at the top of your screen, allows you to see where you are in your navigation and exit this component. Inside a visual component, you can add all kinds of content: images, text etc. You can even add one or more components and create advanced nesting. [Image: Inside a group: the breadcrumb shows 6. Garden map > Multi-state18029 - closed > Group18373, and the list shows the menu objects] Here you are inside a Group, itself inside a Multi-state. You can create [markers](https://docs.pandasuite.com/essentials/interactions/markers/) on your components, i.e., identify one or more specific behaviors of this component and use it for an action. This can be the time of a video, a scroll position, a degree of tilt, etc. Go to the left window to edit and manage your markers. [Image: Markers panel on the left, inside a Web component: the New year 2021 marker and its ID, with its properties on the right] This Web component marker triggers an action on a given date. ## Properties of a component The properties are specific to each component: source, autoplay, orientation, margin... Edit the properties from the right window. [Image: Text Input properties on the right: content, type, placeholder, size, alignment, color and live validation] Here are the properties of the Text Input. ## Actions of a component Your component can be used as a trigger for an action. To trigger an action from a component, select the component and click on Actions. Choose a trigger event from the list: some events are specific to the component and others are common to all components. [Image: Multi-state triggers in the Action window: Display state 1 - closed and state 2 - open, then Single tap/click, Double tap/click…] Multi-state triggers include the display of each state. Your component can also be the object of an action. Once you have chosen your trigger event, select the **Interact with a component** action > select this component and choose an action. [Image: Interact with a component targeting a Multi-state, on a button tap/click, with Select state, Next state, Previous state, Random state] Here are the actions for the Multi-state component. ## Synchronize components [Synchronization](https://docs.pandasuite.com/essentials/components/synchronization/) allows you to synchronize several components with each other. For example, you can synchronize an Audio Player with a Scrolling Area to scroll content according to the music. Or synchronize two (or more) Scrolling Areas together to achieve a Parallax effect. Insert a Synchronization component and create a synchronization group with your components. [Image: Synchronization properties: Background and Clouds scrolling areas linked by horizontal position, Birds by vertical position] This synchronization between 3 scrolling areas allows to build a Parallax effect. ## Create a custom component If you are a developer and want to add new features, you can create your own [Custom Components](https://docs.pandasuite.com/essentials/components/custom-components/). We provide you with our PandaBridge libraries (Javascript & React) that allow you to send and receive information between your code and PandaSuite.