diff --git a/app-config.yaml b/app-config.yaml
index c150ef5902..010c9b9710 100644
--- a/app-config.yaml
+++ b/app-config.yaml
@@ -208,7 +208,7 @@ catalog:
     # Backstage example components
     - type: file
       target: ../catalog-model/examples/all-components.yaml
-    # Example component for github-actions
+    # Example component for github-actions and TechDocs
     - type: file
       target: ../../plugins/github-actions/examples/sample.yaml
     # Example component for TechDocs
diff --git a/packages/techdocs-common/src/stages/prepare/dir.ts b/packages/techdocs-common/src/stages/prepare/dir.ts
index 537f670edc..ab277fda9a 100644
--- a/packages/techdocs-common/src/stages/prepare/dir.ts
+++ b/packages/techdocs-common/src/stages/prepare/dir.ts
@@ -18,17 +18,19 @@ import { Entity } from '@backstage/catalog-model';
 import { Config } from '@backstage/config';
 import path from 'path';
 import { parseReferenceAnnotation, checkoutGitRepository } from '../../helpers';
-import { InputError } from '@backstage/backend-common';
+import { UrlReader, InputError } from '@backstage/backend-common';
 import parseGitUrl from 'git-url-parse';
 import { Logger } from 'winston';
 
 export class DirectoryPreparer implements PreparerBase {
-  private readonly config: Config;
-  private readonly logger: Logger;
-
-  constructor(config: Config, logger: Logger) {
+  constructor(
+    private readonly config: Config,
+    private readonly logger: Logger,
+    private readonly reader: UrlReader,
+  ) {
     this.config = config;
     this.logger = logger;
+    this.reader = reader;
   }
 
   private async resolveManagedByLocationToDir(entity: Entity) {
@@ -41,9 +43,12 @@ export class DirectoryPreparer implements PreparerBase {
       `Building docs for entity with type 'dir' and managed-by-location '${type}'`,
     );
     switch (type) {
+      case 'url': {
+        const response = await this.reader.readTree(target);
+        return await response.dir();
+      }
       case 'github':
       case 'gitlab':
-      case 'url':
       case 'azure/api': {
         const parsedGitLocation = parseGitUrl(target);
         const repoLocation = await checkoutGitRepository(
@@ -56,7 +61,6 @@ export class DirectoryPreparer implements PreparerBase {
           path.join(repoLocation, parsedGitLocation.filepath),
         );
       }
-
       case 'file':
         return path.dirname(target);
       default:
diff --git a/packages/techdocs-common/src/stages/prepare/preparers.ts b/packages/techdocs-common/src/stages/prepare/preparers.ts
index 4625d7b0e4..de825d5d41 100644
--- a/packages/techdocs-common/src/stages/prepare/preparers.ts
+++ b/packages/techdocs-common/src/stages/prepare/preparers.ts
@@ -35,17 +35,22 @@ export class Preparers implements PreparerBuilder {
   ): Promise<PreparerBuilder> {
     const preparers = new Preparers();
 
-    const directoryPreparer = new DirectoryPreparer(config, logger);
+    const urlPreparer = new UrlPreparer(reader, logger);
+    preparers.register('url', urlPreparer);
+
+    /**
+     * Dir preparer is a syntactic sugar for users to define techdocs-ref annotation.
+     * When using dir preparer, the docs will be fetched using URL Reader.
+     */
+    const directoryPreparer = new DirectoryPreparer(config, logger, reader);
     preparers.register('dir', directoryPreparer);
 
+    // Common git preparers will be deprecated soon.
     const commonGitPreparer = new CommonGitPreparer(config, logger);
     preparers.register('github', commonGitPreparer);
     preparers.register('gitlab', commonGitPreparer);
     preparers.register('azure/api', commonGitPreparer);
 
-    const urlPreparer = new UrlPreparer(reader, logger);
-    preparers.register('url', urlPreparer);
-
     return preparers;
   }