diff --git a/apps/docs-app/docs/contributors.mdx b/apps/docs-app/docs/contributors.mdx
index 89430ba4a..aaf8fa6f6 100644
--- a/apps/docs-app/docs/contributors.mdx
+++ b/apps/docs-app/docs/contributors.mdx
@@ -174,6 +174,7 @@ Andres is a software engineer for HeroDevs, Angular and Firebase GDE.
diff --git a/apps/docs-app/docs/experimental/sfc/index.md b/apps/docs-app/docs/experimental/sfc/index.md
new file mode 100644
index 000000000..6374a0a5c
--- /dev/null
+++ b/apps/docs-app/docs/experimental/sfc/index.md
@@ -0,0 +1,403 @@
+---
+sidebar_position: 1
+---
+
+# Analog SFCs
+
+> **Note:**
+>
+> This file format and API is experimental, is a community-driven initiative, and is not an officially proposed change to Angular. Use it at your own risk.
+
+The `.analog` file extension denotes a new file format for Single File Components (SFCs) that aims to simplify the authoring experience and provide Angular-compatible components and directives.
+
+Together, it combines:
+
+- Colocated template, script, and style tags
+- Use of Angular Signal APIs without decorators
+- Performance-first defaults (`OnPush` change detection, no accesss to `ngDoCheck`, etc.)
+
+## Usage
+
+To use the Analog SFC, you need to use the Analog Vite plugin or the [Analog Astro plugin](/docs/packages/astro-angular/overview) with an additional flag to enable its usage:
+
+```typescript
+import { defineConfig } from 'vite';
+import analog from '@analogjs/platform';
+
+export default defineConfig({
+ // ...
+ plugins: [
+ analog({
+ vite: {
+ // Required to use the Analog SFC format
+ experimental: {
+ supportAnalogFormat: true,
+ },
+ },
+ }),
+ ],
+});
+```
+
+> You must also uncomment the type information in the `src/vite-env.d.ts` file. This is temporary while the Analog SFC is experimental.
+
+### Additional Configuration
+
+If you are using `.analog` files outside a project's root you need to specify all paths of `.analog` files using globs, like so:
+
+```typescript
+export default defineConfig(({ mode }) => ({
+ // ...
+ plugins: [
+ analog({
+ vite: {
+ experimental: {
+ supportAnalogFormat: {
+ include: ['/libs/shared/ui/**/*', '/libs/some-lib/ui/**/*'],
+ },
+ },
+ },
+ }),
+ ],
+}));
+```
+
+### IDE Support
+
+To support syntax highlighting and other IDE functionality with `.analog` files, you need to install an extension to support the format for:
+
+- [WebStorm 2024.1+ or IDEA Ultimate 2024.1+ (EAP)](https://github.com/analogjs/idea-plugin)
+
+> [Support for VSCode is coming! Please see this issue for more details](https://github.com/analogjs/analog/issues/858/).
+
+## Authoring an SFC
+
+Here's a demonstration of the Analog format building a simple counter:
+
+```html
+
+
+
+
+
+
+
+
+
+```
+
+See the [defineMetadata](#metadata) section for adding additional component metadata.
+
+## Metadata
+
+While class decorators are used to add metadata to a component or directive in the traditional Angular authoring methods, they're replaced in the Analog format with the `defineMetadata` global function:
+
+```typescript
+defineMetadata({
+ host: { class: 'block articles-toggle' },
+});
+```
+
+This supports all of the decorator properties of `@Component` or `@Directive` with a few exceptions.
+
+### Disallowed Metadata Properties
+
+The following properties are not allowed on the metadata fields:
+
+- `template`: Use the SFC `` or `defineMetadata.templateUrl` instead
+- `standalone`: Always set to `true`
+- `changeDetection`: Always set to `OnPush`
+- `styles`: Use the SFC `
