<h2>Overview</h2>
<p>The Spa Angular Editable Components offer a robust framework for integrating Angular applications with Adobe Experience Manager's Site Editor. This set of components streamlines the development process by providing essential tools that enhance the user experience and boost productivity while working within the AEM ecosystem. Developers can quickly leverage these components to create dynamic, editable content-driven applications that are both efficient and easy to manage.</p>
<p>With comprehensive documentation and guides available, getting started with the AEM SPA Editor using Angular has never been easier. Whether you are a seasoned developer or just beginning to explore AEM, this collection of components ensures that you have the resources and support you need to succeed.</p>
<h2>Features</h2>
<ul>
<li><strong>Angular Integration</strong>: Seamlessly integrates Angular applications with Adobe Experience Manager, enabling efficient content management and editing capabilities.</li>
<li><strong>Comprehensive Documentation</strong>: Provides detailed guides and installation instructions to help developers get up and running quickly.</li>
<li><strong>Editable Components</strong>: Offers a range of out-of-the-box editable components that can be used to create interactive and user-friendly interfaces.</li>
<li><strong>Contributions Welcome</strong>: The project encourages community contributions, fostering a collaborative environment for sharing improvements and innovations.</li>
<li><strong>Apache V2 License</strong>: Licensed under the Apache V2 License, ensuring that it is open-source and free to use for various projects.</li>
<li><strong>Quality Assurance</strong>: Equipped with a quality gate status that helps maintain high standards in code quality and reduces potential vulnerabilities.</li>
<li><strong>Dependency Management</strong>: Easily manage dependencies and ensure compatibility within your project ecosystem.</li>
</ul>
<p>With these features, the Spa Angular Editable Components stand out as a go-to solution for developers looking to enhance their AEM projects with Angular.</p>


<h2>Overview</h2>
<p>The AEM Project Archetype is a Maven template that creates a minimal, best-practices-based Adobe Experience Manager (AEM) project. It serves as a starting point for building a website and provides various features and functionalities.</p>
<h2>Features</h2>
<ul>
<li><strong>Best Practice</strong>: Bootstrap your site with all of Adobe's latest recommended practices.</li>
<li><strong>Low-Code</strong>: Easily edit templates, create content, and deploy CSS without writing extensive code.</li>
<li><strong>Cloud-Ready</strong>: Supports AEM as a Cloud Service for easy scalability and maintenance.</li>
<li><strong>Dispatcher</strong>: Includes a Dispatcher configuration for speed and security.</li>
<li><strong>Multi-Site</strong>: Generates content structure for multi-language and multi-region setups.</li>
<li><strong>Core Components</strong>: Offers standardized components for creating versatile layouts.</li>
<li><strong>Editable Templates</strong>: Assemble templates without coding and define author editing permissions.</li>
<li><strong>Responsive Layout</strong>: Define how elements reflow based on breakpoints.</li>
<li><strong>Header and Footer</strong>: Assemble and localize headers and footers without code.</li>
<li><strong>Style System</strong>: Allow authors to apply different styles to components without custom building.</li>
<li><strong>Front-End Build</strong>: Supports mocking AEM pages and building client libraries with Webpack, TypeScript, and SASS.</li>
<li><strong>Decoupled Front-End</strong>: Preconfigured to use the AEMaaCS Frontend Pipeline for decoupled front-end modules.</li>
<li><strong>WebApp-Ready</strong>: Enables in-context authoring for React or Angular web apps using the SPA SDK.</li>
<li><strong>Commerce Enabled</strong>: Integration with Commerce Integration Framework (CIF) for commerce solutions like Magento.</li>
<li><strong>Forms Enabled</strong>: Supports use of Forms for projects.</li>
<li><strong>Testing</strong>: Includes ready-to-use Functional and UI testing modules.</li>
<li><strong>Example Code</strong>: Provides a HelloWorld component and sample models, servlets, filters, and schedulers.</li>
<li><strong>Open Sourced</strong>: Allows users to contribute improvements and fixes.</li>
</ul>
<h2>Summary</h2>
<p>The AEM Project Archetype is a powerful tool for creating AEM projects that adhere to best practices. It provides a range of features including easy editing of templates, cloud-readiness, multi-language support, standardized components, and support for front-end frameworks. With its open source nature, it also encourages contribution and improvement from its users.</p>


<h2>Overview</h2>
<p>The AEM React Editable Components offer a seamless integration of Adobe Experience Manager with React, making it a powerful tool for developers looking to enhance their Single Page Applications (SPAs). With its user-friendly approach, this solution facilitates a more dynamic and responsive editing experience, empowering content authors to make changes effortlessly while maintaining the integrity of the application.</p>
<p>Designed specifically for AEM, these components leverage the flexibility of React to provide rich, interactive user interfaces. Whether you're building a new application or enhancing an existing one, AEM React Editable Components provide the necessary tools to optimize your content management workflow and improve overall user engagement.</p>
<h2>Features</h2>
<ul>
<li>
<p><strong>Seamless AEM Integration:</strong> Easily connect your React components with Adobe Experience Manager for smooth content availability and editing capabilities.</p>
</li>
<li>
<p><strong>Real-time Editing:</strong> Offers a live editing experience that allows content authors to see changes in real-time, enhancing productivity and collaboration.</p>
</li>
<li>
<p><strong>Customizable Components:</strong> Provides a variety of customizable React components that can be tailored to fit specific project needs and design aesthetics.</p>
</li>
<li>
<p><strong>Responsive Design:</strong> Ensures that all components are fully responsive, adapting to various screen sizes for an optimal user experience across devices.</p>
</li>
<li>
<p><strong>Robust Documentation:</strong> Comes with comprehensive documentation that guides developers through setup, usage, and integration processes, making it accessible for users at any skill level.</p>
</li>
<li>
<p><strong>Enhanced Developer Experience:</strong> Simplifies the development workflow with familiar React patterns while ensuring compatibility with AEM features.</p>
</li>
<li>
<p><strong>Scalable Architecture:</strong> Built to support scalability, accommodating growing applications and complex content structures without compromising performance.</p>
</li>
</ul>


<h2>Overview</h2>
<p>This product is a utility tooling library designed to aid in the building and deployment of Adobe I/O Project Firefly app static sites to a CDN. It is a web-based utility that can be used to enhance the development process and improve the deployment of these sites.</p>
<h2>Features</h2>
<ul>
<li><strong>Build and Deploy</strong>: This utility tooling library allows users to easily build and deploy Adobe I/O Project Firefly app static sites to a CDN.</li>
<li><strong>Enhanced Development</strong>: The library provides additional features and functionality to enhance the development process, making it easier and more efficient.</li>
<li><strong>CDN Integration</strong>: With this utility tooling library, users can seamlessly integrate their Adobe I/O Project Firefly app static sites with a CDN for better performance and reliability.</li>
</ul>
<h2>Summary</h2>
<p>In summary, this utility tooling library provides a range of features and functionality to enhance the development and deployment process of Adobe I/O Project Firefly app static sites. It offers seamless integration with a CDN, making it easier to build and deploy these sites efficiently. Contributions to this project are welcomed, and it is licensed under the Apache V2 License.</p>


<h2>Overview</h2>
<p>Brackets is a modern open-source code editor for HTML, CSS, and JavaScript built with HTML, CSS, and JavaScript. It focuses on providing a clean and streamlined user interface without cluttering up the coding environment with unnecessary panels and icons. Brackets offers features like Quick Edit UI for context-specific code editing and Live Preview for real-time synchronization with the browser view.</p>
<h2>Features</h2>
<ul>
<li><strong>Quick Edit UI</strong>: Context-specific code and tools are placed inline without cluttering the coding environment.</li>
<li><strong>Live Preview</strong>: Works directly with the browser to push code edits instantly and switch back and forth between source code and browser view.</li>
<li><strong>Open Source</strong>: Built with HTML, CSS, and JavaScript, allowing community contributions to enhance the code editor.</li>
<li><strong>Extensible</strong>: Large and growing community of developers building extensions for additional functionalities.</li>
<li><strong>Intuitive Interface</strong>: Clean and user-friendly design makes it easy to navigate and use.</li>
</ul>
<h2>Summary</h2>
<p>Brackets is a versatile code editor designed for web development with a focus on simplicity and efficiency. Its unique features like Quick Edit UI and Live Preview streamline the coding process, while its open-source nature encourages community contributions and extension development. With a user-friendly interface and real-time synchronization with the browser, Brackets offers a seamless coding experience for developers.</p>


<h2>Overview:</h2>
<p>The Coral Spectrum Web Components is a project that aims to develop the Adobe Spectrum design language using web components, ES-Modules, and modern browser standards. It provides a JavaScript library of web components that follow Spectrum design patterns. The project focuses on consistency and compatibility with major frameworks like Angular, React, and Vue.js. Coral Spectrum is designed to support multiple browsers and includes built-in accessibility and internationalization support.</p>
<h2>Features:</h2>
<ul>
<li><strong>Component Examples:</strong> Showcase of various Coral Spectrum components in action.</li>
<li><strong>API References:</strong> Detailed API documentation covering properties, events, and more for all components.</li>
<li><strong>Playground:</strong> A sandboxed environment to experiment and preview code with the latest version of Coral Spectrum. Code can be shared by copy-pasting the URL.</li>
<li><strong>Default Theme:</strong> Implementation of the Spectrum design specifications, providing elements and tools to help product teams work efficiently and make Adobe's applications more cohesive.</li>
<li><strong>Compatibility with Major Frameworks:</strong> Compatible with Angular, React, and Vue.js, providing a complete and easy-to-use library of HTML components.</li>
<li><strong>Browser Support:</strong> Designed to support the latest versions of Chrome, Safari, Firefox, Edge, IE 11, iOS 7+, and Android 4.4+.</li>
<li><strong>Theme Options:</strong> Supports different themes like light, dark, lightest, and darkest, with the ability to specify the theme class at a higher level.</li>
<li><strong>Large Scale Support:</strong> Supports larger tap targets on mobile controls by specifying the class coral--large at a higher level.</li>
<li><strong>Built-in Accessibility and Keyboard Support:</strong> Every Coral Spectrum component is designed to be accessible and usable for all users.</li>
<li><strong>Internationalization Support:</strong> Provides a robust internal system for internationalizing strings, supporting multiple languages.</li>
</ul>
<h2>Summary:</h2>
<p>The Coral Spectrum Web Components project aims to bring the Adobe Spectrum design language to the web using web components and modern browser standards. It provides a library of components that follow Spectrum design patterns and are compatible with major frameworks. The project emphasizes consistency, browser support, accessibility, and internationalization. With features like a component showcase, API documentation, and a playground for code experimentation, Coral Spectrum offers developers a comprehensive solution for building web applications with the Spectrum design language.</p>


<h2>Overview:</h2>
<p>The HTML Template Language (HTL), formerly known as Sightly, is a server-side template system for HTML introduced with Adobe Experience Manager 6.0. It replaces JSP (JavaServer Pages) as the preferred and recommended template system for generating server-side HTML.</p>
<h2>Features:</h2>
<ul>
<li><strong>Syntax and Behavior Definition</strong>: The HTL Specification defines the syntax and behavior of the HTML Template Language.</li>
<li><strong>Java-based Reference Implementation</strong>: A reference implementation of HTL has been donated to the Apache Sling project and can be found at https://github.com/apache/sling/tree/trunk/bundles/scripting/sightly.</li>
<li><strong>Technology Compatibility Kit</strong>: The Technology Compatibility Kit can be used to test the compliance of HTL implementations with the specification.</li>
<li><strong>Version Availability</strong>: Version 1.4 of the HTL language specification is available in AEM 6.3 SP3 and AEM 6.4 SP1.</li>
</ul>
<h2>Summary:</h2>
<p>The HTML Template Language (HTL) is a powerful server-side template system for HTML that is recommended for use with Adobe Experience Manager. It offers a clear syntax and behavior definition, along with a Java-based reference implementation. By following the installation guide, developers can easily set up HTL and test its compliance with the specification.</p>


<h2>Overview</h2>
<p>The Adobe Coral Spectrum Hugo theme is a Hugo theme that utilizes Adobe's Coral-Spectrum Web Components to follow Spectrum design patterns. This theme is designed to be used for creating documentation websites. It supports various features such as Mermaid diagrams, Markdeep diagrams, Stork search, and MathJax math typesetting. The theme is built using Spectrum CSS, an open-source implementation of Adobe's design system, along with other JavaScript libraries such as Markdeep and Mermaid.</p>
<h2>Features</h2>
<ul>
<li>Utilizes Adobe Coral-Spectrum Web Components following Spectrum design patterns.</li>
<li>Supports Mermaid diagrams for visualizing complex charts and diagrams.</li>
<li>Supports Markdeep diagrams for creating interactive, informational diagrams.</li>
<li>Includes Stork search for fast and efficient searching of website content.</li>
<li>Supports MathJax for beautiful and accessible math typesetting.</li>
<li>Built using Spectrum CSS, Adobe's design system.</li>
<li>Includes various JavaScript libraries like mark.js and Zalando Tech Radar.</li>
<li>Allows contributions from the community.</li>
</ul>
<h2>Summary</h2>
<p>The Adobe Coral Spectrum Hugo theme is a powerful theme for creating documentation websites. It leverages Adobe's Coral-Spectrum Web Components and follows Spectrum design patterns to provide a visually appealing and user-friendly experience. The theme supports various features such as Mermaid and Markdeep diagrams, Stork search, and MathJax math typesetting. It is built using Spectrum CSS and includes several JavaScript libraries for enhanced functionality. The theme is open-source and welcomes contributions from the community.</p>


<h2>Overview</h2>
<p>Hyde is a utility that facilitates documenting C++. It is unique from existing documentation utilities in several ways. First, it is based on Clang's libTooling library, allowing it to compile and document C++ code as the language evolves. Second, it uses out-of-line documentation instead of inline comments, avoiding the problem of comments falling out of sync and becoming a distraction. Third, it produces well-structured Markdown files with YAML front-matter, making it compatible with tools like Jekyll for customizing the final documentation's structure and layout. Fourth, Hyde enforces schema to keep the documentation in sync with the C++ code. Lastly, it is adaptable, allowing additional tools or emitters to be built on top of its output.</p>
<h2>Features</h2>
<ul>
<li><strong>Clang based</strong>: Hyde uses Clang's libTooling library to compile and document C++ code.</li>
<li><strong>Out-of-line documentation</strong>: Hyde avoids inline comments and uses separate documentation files to prevent syncing issues and distractions.</li>
<li><strong>Jekyll compatible</strong>: Hyde produces well-structured Markdown files with YAML front-matter, making it compatible with tools like Jekyll.</li>
<li><strong>Schema enforcement</strong>: Hyde compares pre-existing documentation files with the current state of the C++ sources to keep the documentation accurate.</li>
<li><strong>Adaptable</strong>: In addition to documentation, Hyde can output AST-based information about the code as a JSON-based IR, allowing for additional tools or emitters to be built on top.</li>
</ul>
<h3>Requirements</h3>
<ul>
<li><strong>macOS</strong>:
<ul>
<li>Homebrew: <code>brew install cmake</code></li>
<li>Optional: <code>brew install ninja</code></li>
</ul>
</li>
<li><strong>Linux (Ubuntu Bionic)</strong>:
<ul>
<li><code>sudo apt-get install libyaml-cpp-dev</code></li>
</ul>
</li>
</ul>
<h3>Building Hyde</h3>
<ol>
<li>Clone the repository: <code>git clone &#x3C;repository-url></code></li>
<li>Change into the Hyde directory: <code>cd hyde</code></li>
<li>Initialize submodules: <code>git submodule update --init</code></li>
<li>Create a build directory: <code>mkdir build</code></li>
<li>Change into the build directory: <code>cd build</code></li>
<li>Configure the build with CMake: <code>cmake .. -GNinja</code> (or specify your preferred generator)</li>
<li>Build Hyde with Ninja: <code>ninja</code> (or use your chosen build tool)</li>
</ol>
<h3>Using Docker</h3>
<ul>
<li>You may need to increase your Docker resources to build the Hyde image.</li>
</ul>
<h3>Parameters and Flags</h3>
<ul>
<li>Hyde can run in several modes:
<ul>
<li><code>-hyde-json</code> (default): Output an analysis dump of the input file as JSON.</li>
<li><code>-hyde-validate</code>: Validate existing YAML documentation.</li>
<li><code>-hyde-update</code>: Write updated YAML documentation.</li>
<li><code>-hyde-src-root=&#x3C;path></code>: The root path to the header file(s) being analyzed, affecting defined_in.</li>
</ul>
</li>
</ul>
<h2>Summary</h2>
<p>Hyde is a unique utility that facilitates documenting C++ code. By using Clang's libTooling library, it keeps the documentation up to date with the evolving C++ language. With its out-of-line documentation approach, Hyde avoids syncing issues and distractions that can arise from inline comments. It also produces well-structured Markdown files with YAML front-matter, making it compatible with tools like Jekyll for customization. Hyde enforces schema to ensure the documentation accurately reflects the code, and it is adaptable, allowing additional tools or emitters to be built on top of its output.</p>


<h2>Overview</h2>
<p>React Spectrum Charts offers a powerful solution for developers looking to create impactful visualizations using declarative React components. With a focus on accessibility and flexibility, it allows users to harness the full potential of data representation without compromising on design or user experience. Whether you’re building simple line charts or more complex data displays, React Spectrum Charts makes the process efficient and straightforward.</p>
<p>This library is designed not just for aesthetics but also for functionality, aiming to cater to various needs across different projects. Its integration with React streamlines the process, making it an appealing choice for developers who prioritize both performance and usability in their applications.</p>
<h2>Features</h2>
<ul>
<li>
<p><strong>Declarative Components</strong>: Easily create charts by using simple, declarative components that align seamlessly with React's principles.</p>
</li>
<li>
<p><strong>Accessibility Focused</strong>: Built with accessibility in mind, ensuring that visualizations are usable by everyone, including those with disabilities.</p>
</li>
<li>
<p><strong>Customizable Styling</strong>: Flexibility to customize the look and feel of charts, allowing developers to align them with their application’s design language.</p>
</li>
<li>
<p><strong>Rich Chart Types</strong>: Supports a variety of chart types such as bar charts, line charts, and scatter plots, catering to diverse visualization needs.</p>
</li>
<li>
<p><strong>Responsive Design</strong>: Adapts to various screen sizes, ensuring that visualizations look great on both desktop and mobile devices.</p>
</li>
<li>
<p><strong>Data Binding</strong>: Easily bind data to charts for dynamic updates, allowing for real-time data visualization without hassle.</p>
</li>
<li>
<p><strong>Comprehensive Documentation</strong>: Offers thorough documentation that guides developers through installation, usage, and customization options, making it beginner-friendly.</p>
</li>
</ul>


<h2>Overview:</h2>
<p>React Spectrum Libraries is a collection of libraries and tools that help developers build adaptive, accessible, and robust user experiences. It includes React Spectrum, a React implementation of Adobe's design system, as well as React Aria and React Stately, which provide accessible UI primitives and cross-platform state management for design systems. The libraries are designed to be customizable, with support for custom themes and dark mode.</p>
<h2>Features:</h2>
<ul>
<li><strong>Accessible:</strong> All components adhere to WAI-ARIA Authoring Practices for accessibility, with support for screen readers and keyboard navigation.</li>
<li><strong>Adaptive:</strong> Components work seamlessly with mouse, touch, and keyboard interactions and are built with responsive design principles for optimal performance on any device.</li>
<li><strong>International:</strong> The libraries include support for over 30 languages, right-to-left languages, and date and number formatting.</li>
<li><strong>Customizable:</strong> React Spectrum components support custom themes and automatically adapt for dark mode. Developers can also build their own components using the React Aria and React Stately hooks for customized behavior, accessibility, and interactions.</li>
</ul>
<h2>Summary:</h2>
<p>React Spectrum Libraries is a comprehensive set of libraries and tools for building adaptive and accessible user experiences. It includes React Spectrum, React Aria, and React Stately, providing developers with flexible options for implementing Adobe's design system, UI primitives, and cross-platform state management. With support for customization and internationalization, the libraries aim to improve the development process and enhance the quality of web applications. The project also encourages contributions from the community to further advance the capabilities and features of React Spectrum.</p>


Adobe

Aem Angular Editable Components

Aem Project Archetype

Aem React Editable Components

Aio Lib Web

Brackets

Coral Spectrum

Htl Spec

Hugo Spectrum

Hyde

React Spectrum Charts

React Spectrum

React Twist Starter