diff --git a/routers/web/repo/run.go b/routers/web/repo/run.go
new file mode 100644
index 0000000000..eda7b47320
--- /dev/null
+++ b/routers/web/repo/run.go
@@ -0,0 +1,119 @@
+package repo
+
+import (
+	"io"
+	"net/http"
+	"path"
+	"strings"
+
+	"code.gitea.io/gitea/modules/base"
+	"code.gitea.io/gitea/modules/charset"
+	"code.gitea.io/gitea/modules/log"
+	"code.gitea.io/gitea/modules/markup"
+	"code.gitea.io/gitea/modules/setting"
+	"code.gitea.io/gitea/modules/typesniffer"
+	"code.gitea.io/gitea/modules/util"
+	"code.gitea.io/gitea/services/context"
+)
+
+const (
+	tplRunFile base.TplName = "repo/editor/run"
+)
+
+func RunFile(ctx *context.Context) {
+	runFile(ctx, false)
+}
+
+func runFile(ctx *context.Context, isNewFile bool) {
+	ctx.Data["PageIsEdit"] = true
+	ctx.Data["IsNewFile"] = isNewFile
+	canCommit := renderCommitRights(ctx)
+
+	treePath := cleanUploadFileName(ctx.Repo.TreePath)
+	if treePath != ctx.Repo.TreePath {
+		if isNewFile {
+			ctx.Redirect(path.Join(ctx.Repo.RepoLink, "_new", util.PathEscapeSegments(ctx.Repo.BranchName), util.PathEscapeSegments(treePath)))
+		} else {
+			ctx.Redirect(path.Join(ctx.Repo.RepoLink, "_edit", util.PathEscapeSegments(ctx.Repo.BranchName), util.PathEscapeSegments(treePath)))
+		}
+		return
+	}
+
+	// Check if the filename (and additional path) is specified in the querystring
+	// (filename is a misnomer, but kept for compatibility with GitHub)
+	filePath, fileName := path.Split(ctx.Req.URL.Query().Get("filename"))
+	filePath = strings.Trim(filePath, "/")
+	treeNames, treePaths := getParentTreeFields(path.Join(ctx.Repo.TreePath, filePath))
+
+	if !isNewFile {
+		entry, err := ctx.Repo.Commit.GetTreeEntryByPath(ctx.Repo.TreePath)
+		if err != nil {
+			HandleGitError(ctx, "Repo.Commit.GetTreeEntryByPath", err)
+			return
+		}
+
+		// No way to edit a directory online.
+		if entry.IsDir() {
+			ctx.NotFound("entry.IsDir", nil)
+			return
+		}
+
+		blob := entry.Blob()
+		if blob.Size() >= setting.UI.MaxDisplayFileSize {
+			ctx.NotFound("blob.Size", err)
+			return
+		}
+
+		dataRc, err := blob.DataAsync()
+		if err != nil {
+			ctx.NotFound("blob.Data", err)
+			return
+		}
+
+		defer dataRc.Close()
+
+		ctx.Data["FileSize"] = blob.Size()
+		ctx.Data["FileName"] = blob.Name()
+
+		buf := make([]byte, 1024)
+		n, _ := util.ReadAtMost(dataRc, buf)
+		buf = buf[:n]
+
+		// Only some file types are editable online as text.
+		if !typesniffer.DetectContentType(buf).IsRepresentableAsText() {
+			ctx.NotFound("typesniffer.IsRepresentableAsText", nil)
+			return
+		}
+
+		d, _ := io.ReadAll(dataRc)
+
+		buf = append(buf, d...)
+		if content, err := charset.ToUTF8(buf, charset.ConvertOpts{KeepBOM: true}); err != nil {
+			log.Error("ToUTF8: %v", err)
+			ctx.Data["FileContent"] = string(buf)
+		} else {
+			ctx.Data["FileContent"] = content
+		}
+	} else {
+		// Append filename from query, or empty string to allow user name the new file.
+		treeNames = append(treeNames, fileName)
+	}
+
+	ctx.Data["TreeNames"] = treeNames
+	ctx.Data["TreePaths"] = treePaths
+	ctx.Data["BranchLink"] = ctx.Repo.RepoLink + "/src/" + ctx.Repo.BranchNameSubURL()
+	ctx.Data["commit_summary"] = ""
+	ctx.Data["commit_message"] = ""
+	if canCommit {
+		ctx.Data["commit_choice"] = frmCommitChoiceDirect
+	} else {
+		ctx.Data["commit_choice"] = frmCommitChoiceNewBranch
+	}
+	ctx.Data["new_branch_name"] = GetUniquePatchBranchName(ctx)
+	ctx.Data["last_commit"] = ctx.Repo.CommitID
+	ctx.Data["PreviewableExtensions"] = strings.Join(markup.PreviewableExtensions(), ",")
+	ctx.Data["LineWrapExtensions"] = strings.Join(setting.Repository.Editor.LineWrapExtensions, ",")
+	ctx.Data["EditorconfigJson"] = GetEditorConfig(ctx, treePath)
+
+	ctx.HTML(http.StatusOK, tplRunFile)
+}
diff --git a/routers/web/web.go b/routers/web/web.go
index 354173cdd0..95ff41b280 100644
--- a/routers/web/web.go
+++ b/routers/web/web.go
@@ -1229,6 +1229,8 @@ func registerRoutes(m *web.Route) {
 			m.Group("", func() {
 				m.Combo("/_edit/*").Get(repo.EditFile).
 					Post(web.Bind(forms.EditRepoFileForm{}), repo.EditFilePost)
+				m.Combo("/_run/*").Get(repo.RunFile).
+					Post(web.Bind(forms.EditRepoFileForm{}), repo.EditFilePost)
 				m.Combo("/_new/*").Get(repo.NewFile).
 					Post(web.Bind(forms.EditRepoFileForm{}), repo.NewFilePost)
 				m.Post("/_preview/*", web.Bind(forms.EditPreviewDiffForm{}), repo.DiffPreviewPost)
diff --git a/templates/repo/editor/edit.tmpl b/templates/repo/editor/edit.tmpl
index 122482cde6..2f47cd61a3 100644
--- a/templates/repo/editor/edit.tmpl
+++ b/templates/repo/editor/edit.tmpl
@@ -42,8 +42,13 @@
 						data-line-wrap-extensions="{{.LineWrapExtensions}}">{{.FileContent}}</textarea>
 					<div class="editor-loading is-loading"></div>
 				</div>
+				<!-- <div class="ui bottom attached tab segment markup" data-tab="run"> -->
 				<div class="ui bottom attached tab segment markup" data-tab="run">
-					{{ctx.Locale.Tr "loading"}}
+					<button>click me</button>
+					<input type="text" id="english" placeholder="Type English here..." />
+					<button py-click="translate_english">Translate</button>
+					<div id="output"></div>
+					<script type="py" src="{{AssetUrlPrefix}}/pyscript/main.py" config="{{AssetUrlPrefix}}/pyscript/pyscript.json"></script>
 				</div>
 				<div class="ui bottom attached tab segment markup" data-tab="preview">
 					{{ctx.Locale.Tr "loading"}}
diff --git a/templates/repo/editor/run.tmpl b/templates/repo/editor/run.tmpl
new file mode 100644
index 0000000000..3a4fd229ba
--- /dev/null
+++ b/templates/repo/editor/run.tmpl
@@ -0,0 +1,83 @@
+{{template "base/head" .}}
+<div role="main" aria-label="{{.Title}}" class="page-content repository file editor edit">
+	{{template "repo/header" .}}
+	<div class="ui container">
+		{{template "base/alert" .}}
+		<form class="ui edit form" method="post">
+			{{.CsrfTokenHtml}}
+			<input type="hidden" name="last_commit" value="{{.last_commit}}">
+			<input type="hidden" name="page_has_posted" value="{{.PageHasPosted}}">
+			<div class="repo-editor-header">
+				<div class="ui breadcrumb field{{if .Err_TreePath}} error{{end}}">
+					<a class="section" href="{{$.BranchLink}}">{{.Repository.Name}}</a>
+					{{$n := len .TreeNames}}
+					{{$l := Eval $n "-" 1}}
+					{{range $i, $v := .TreeNames}}
+						<div class="breadcrumb-divider">/</div>
+						{{if eq $i $l}}
+							<input id="file-name" maxlength="500" value="{{$v}}" placeholder="{{ctx.Locale.Tr "repo.editor.name_your_file"}}" data-editorconfig="{{$.EditorconfigJson}}" required autofocus>
+							<span data-tooltip-content="{{ctx.Locale.Tr "repo.editor.filename_help"}}">{{svg "octicon-info"}}</span>
+						{{else}}
+							<span class="section"><a href="{{$.BranchLink}}/{{index $.TreePaths $i | PathEscapeSegments}}">{{$v}}</a></span>
+						{{end}}
+					{{end}}
+					<span>{{ctx.Locale.Tr "repo.editor.or"}} <a href="{{$.BranchLink}}{{if not .IsNewFile}}/{{PathEscapeSegments .TreePath}}{{end}}">{{ctx.Locale.Tr "repo.editor.cancel_lower"}}</a></span>
+					<input type="hidden" id="tree_path" name="tree_path" value="{{.TreePath}}" required>
+				</div>
+			</div>
+			<div class="field">
+				<div class="ui top attached tabular menu" data-write="write" data-preview="preview" data-diff="diff">
+					<a class="active item" data-tab="write">{{svg "octicon-code"}} {{if .IsNewFile}}{{ctx.Locale.Tr "repo.editor.new_file"}}{{else}}{{ctx.Locale.Tr "repo.editor.edit_file"}}{{end}}</a>
+					<a class="item" data-tab="run" data-url="{{.Repository.Link}}/markup" data-context="{{.RepoLink}}/src/{{.BranchNameSubURL}}" data-markup-mode="file">{{svg "octicon-paper-airplane"}} {{ctx.Locale.Tr "Run"}}</a>
+					<a class="item" data-tab="preview" data-url="{{.Repository.Link}}/markup" data-context="{{.RepoLink}}/src/{{.BranchNameSubURL}}" data-markup-mode="file">{{svg "octicon-eye"}} {{ctx.Locale.Tr "preview"}}</a>
+					{{if not .IsNewFile}}
+					<a class="item" data-tab="diff" hx-params="context,content" hx-vals='{"context":"{{.BranchLink}}"}' hx-include="#edit_area" hx-swap="innerHTML" hx-target=".tab[data-tab='diff']" hx-indicator=".tab[data-tab='diff']" hx-post="{{.RepoLink}}/_preview/{{.BranchName | PathEscapeSegments}}/{{.TreePath | PathEscapeSegments}}">{{svg "octicon-diff"}} {{ctx.Locale.Tr "repo.editor.preview_changes"}}</a>
+					{{end}}
+				</div>
+				<div class="ui bottom attached active tab segment" data-tab="write">
+					<textarea id="edit_area" name="content" class="tw-hidden" data-id="repo-{{.Repository.Name}}-{{.TreePath}}"
+						data-url="{{.Repository.Link}}/markup"
+						data-context="{{.RepoLink}}"
+						data-previewable-extensions="{{.PreviewableExtensions}}"
+						data-line-wrap-extensions="{{.LineWrapExtensions}}">{{.FileContent}}</textarea>
+					<div class="editor-loading is-loading"></div>
+				</div>
+				<!-- <div class="ui bottom attached tab segment markup" data-tab="run"> -->
+				<div class="ui bottom attached tab segment markup" data-tab="run">
+					<button>click me</button>
+					<input type="text" id="english" placeholder="Type English here..." />
+					<button py-click="translate_english">Translate</button>
+					<div id="output"></div>
+					<script type="py" src="{{AssetUrlPrefix}}/pyscript/main.py" config="{{AssetUrlPrefix}}/pyscript/pyscript.json"></script>
+				</div>
+				<div class="ui bottom attached tab segment markup" data-tab="preview">
+					{{ctx.Locale.Tr "loading"}}
+				</div>
+				<div class="ui bottom attached tab segment diff edit-diff" data-tab="diff">
+					<div class="tw-p-16"></div>
+				</div>
+			</div>
+			{{template "repo/editor/commit_form" .}}
+		</form>
+	</div>
+	<div class="ui g-modal-confirm modal" id="edit-empty-content-modal">
+		<div class="header">
+			{{svg "octicon-file"}}
+			{{ctx.Locale.Tr "repo.editor.commit_empty_file_header"}}
+		</div>
+		<div class="center content">
+			<p>{{ctx.Locale.Tr "repo.editor.commit_empty_file_text"}}</p>
+		</div>
+		<div class="actions">
+			<button class="ui cancel button">
+				{{svg "octicon-x"}}
+				{{ctx.Locale.Tr "repo.editor.cancel"}}
+			</button>
+			<button class="ui primary ok button">
+				{{svg "fontawesome-save"}}
+				{{ctx.Locale.Tr "repo.editor.commit_changes"}}
+			</button>
+		</div>
+	</div>
+</div>
+{{template "base/footer" .}}
diff --git a/templates/repo/view_file.tmpl b/templates/repo/view_file.tmpl
index fc7cd16a0e..021bd26fdb 100644
--- a/templates/repo/view_file.tmpl
+++ b/templates/repo/view_file.tmpl
@@ -91,6 +91,7 @@
 			{{if and .ReadmeInList .CanEditReadmeFile}}
 				<a class="btn-octicon" data-tooltip-content="{{ctx.Locale.Tr "repo.editor.edit_this_file"}}" href="{{.RepoLink}}/_edit/{{PathEscapeSegments .BranchName}}/{{PathEscapeSegments .TreePath}}/{{PathEscapeSegments .FileName}}">{{svg "octicon-pencil"}}</a>
 			{{end}}
+			<a class="btn-octicon" data-tooltip-content="{{ctx.Locale.Tr "repo.editor.edit_this_file"}}" href="{{.RepoLink}}/_run/{{PathEscapeSegments .BranchName}}/{{PathEscapeSegments .TreePath}}/{{PathEscapeSegments .FileName}}">{{svg "octicon-paper-airplane"}}</a>
 		</div>
 	</h4>
 	<div class="ui bottom attached table unstackable segment">
diff --git a/web_src/js/features/repo-editor.js b/web_src/js/features/repo-editor.js
index 01dc4b95aa..8c213e1a81 100644
--- a/web_src/js/features/repo-editor.js
+++ b/web_src/js/features/repo-editor.js
@@ -38,10 +38,14 @@ function initEditPreviewTab($form) {
   }
 }
 
+function initEditRunTab($form) {
+}
+
 function initEditorForm() {
   const $form = $('.repository .edit.form');
   if (!$form) return;
   initEditPreviewTab($form);
+  //initEditRunTab($form);
 }
 
 function getCursorPosition($e) {