+ that discovers included files automatically
+
+
}
col2={
<>
-
- Working with <LaTeX /> made easy
+ <Title
+ level={2}
+ style={{
+ minHeight: "60px",
+ display: "flex",
+ alignItems: "center",
+ flexWrap: "wrap",
+ }}
+ >
+ <span>Fully-featured online editor</span>
-
-
+
+
- Collaborate online
+ Real-time collaboration{" "}
- without any limits!
-
-
-
- Revert recent changes using{" "}
- TimeTravel.
-
-
-
- Worried about maintaining your environment?
-
- }
- >
- CoCalc takes care of everything.
-
-
-
- You only need a web browser and Internet access, or you
- can run your own server.
-
-
+ with unlimited collaborators
+
+
+
+ Side-by-side chat
+ {" "}
+ to discuss documents with collaborators and AI
+
+
+
+ Dark Mode with PDF support
+ {" "}
+ for comfortable night-time editing
+
+
+
+ Complete revision history
+ {" "}
+ to revert any changes
+
+
+
+
+ Fully managed environment
+
+ {" "}
+ with PDF LaTeX, XeLaTeX, and LuaTeX
+
+
+
+
+ Full computational environment
+
+ {" "}
+ accessible from any browser
+
+
}
@@ -167,26 +196,48 @@ export default function LatexEditor({ customize }) {
} />
-
+
+
+ Multiple users can edit the same file online at
+ the same time. Changes are{" "}
+ synchronized in real-time – you see the cursors
+ and edits of other collaborators as they type.
+
+
+
+ Share your project privately with{" "}
+
+ an unlimited number of collaborators
+
+ . Compilation status and PDF output are also synchronized between
+ everyone, ensuring that all collaborators experience the document
+ in exactly the same way.
+
+
- CoCalc's extensive integation with various AI language models
- helps you typesetting formulas.
+ CoCalc's extensive integration with various AI language models
+ helps you typeset formulas.
You enter a description of your desired formula and{" "}
- a language model of your choice transforms it into a proper
- LaTeX formula
+ a language model of your choice transforms it into proper LaTeX
+ code
- . The descriptions can come in various ways:
+ . The descriptions can come in various forms:
+
+ drake equation
-
+ (a+b)^2 = a^2 + 2 a b + b^2
-
+
integral from 0 to infinity of (1+sin(x))/x^2 dx
@@ -209,58 +260,147 @@ export default function LatexEditor({ customize }) {
- Once you got a result you like, click on "Insert" the formula is
- in your document.
+ Once you have a result you like, click "Insert" to add the formula
+ to your document.
+ }
+ title={
+ Dark Mode with PDF Support
+ }
+ image={LatexDarkMode}
+ style={{ background: "rgb(50, 50, 50)", color: "white" }}
+ >
+
+ Love{" "}
+
+ dark mode
+
+ ? CoCalc has you covered!
+
+
+ The editor features dark UI elements as you'd expect,
+ but goes further by inverting the PDF viewer colors. This means
+ that even though your final PDF will have a white background, you
+ can view and edit it with a dark background and bright text for
+ comfortable night-time work.
+
+
+ Note: You can quickly disable this PDF dark mode, to double check
+ the actual output.
+
+
+
+
- One thing that sets CoCalc apart from other online {" "}
- editors is full access to computational software.
- This means you can seamlessly transition from computing{" "}
- your results to publishing them.
+ Working with large LaTeX documents often means splitting your
+ content across multiple files using \include{"{...}"}{" "}
+ or \input{"{...}"} commands.{" "}
+
+
+ CoCalc automatically discovers all included files and makes
+ navigation easy.
- CoCalc supports running Python,{" "}
- SageMath,{" "}
-
- R Statistical Software
-
- , Julia, and more in the same
- project as your document.
+ Each entry shows a brief snippet of its beginning, making it easy
+ to identify the right file.
- Consult the Available Software page or
- look at our{" "}
- Jupyter Notebook page for
- more information.{" "}
+
+ Inverse search
+ {" "}
+ works seamlessly with multi-file documents: double-click
+ anywhere in the PDF and CoCalc automatically opens the correct
+ subfile for you.
+
+
+ Learn more in the{" "}
+
+ multi-file support documentation
+
+ .
-
- Run SageMath, Python, or R in
+
+
+ Execute Python, Sage, or R code directly within your LaTeX
+ source
+ {" "}
+ to automatically generate figures, tables, formulas, and
+ results. Your computational code lives alongside your prose,
+ making your paper fully reproducible.
+
+
+ CoCalc supports{" "}
+
+ SageTeX
+
+ , PythonTeX, and{" "}
+ Knitr. The code runs
+ during compilation, and the output is automatically included
+ in your PDF – change your code, recompile, and your document
+ updates.
+
}
- alt="A LaTeX document with embedded SageMath code"
+ >
+ Embed Python, Sage or R code in documents
+
+
+
- You can run calculations inside your documents! It's
- possible to embed Sage, R, or Python code in your document to
- automatically generate text, plots, formulas or tables. The code
- is evaluated as part of the compilation process and the output
- will be included in the generated document.
+
+ Stop copying and pasting computational results into your papers.
+ {" "}
+ CoCalc gives you{" "}
+ full access to computational software directly
+ within your editor – seamlessly compute your results and
+ publish them in the same environment.
+
+
+ Run Python,{" "}
+ SageMath,{" "}
+ R,{" "}
+ Julia, and more right alongside your
+ document. All software is pre-installed and maintained – no setup
+ required.
+
+
+ Learn more on our Available Software page{" "}
+ or Jupyter Notebook page.
@@ -276,44 +416,42 @@ export default function LatexEditor({ customize }) {
SageTeX
{" "}
- lets you embed SageMath{" "}
- in your document!
+ brings the power of{" "}
+ SageMath symbolic
+ computation directly into your LaTeX documents.
- Write Sage commands like{" "}
+ Write{" "}
\sage{"{"}2 + 3{"}"}
{" "}
- in and the document will contain "5",{" "}
+ to get "5", use{" "}
\sage{"{"}f.taylor(x, 0, 10){"}"}
{" "}
- for the Taylor expansion of a function f, and drawing
- graphs becomes as simple as{" "}
+ for Taylor expansions, and create plots with{" "}
\sageplot{"{"}sin(x^2){"}"}
- .
-
-
-
- CoCalc deals with all the underlying details for you:
-
+ . CoCalc automatically handles the full compilation pipeline:
-
It runs the initial compilation pass,
- uses SageMath to
- compute the text output, graphs and images,
+ Runs the initial compilation pass
- and then runs a second compilation pass to produce the final
- PDF output.
+ Executes SageMath to
+ compute results, graphs, and images
+
Completes the final compilation to produce your PDF
+
+ No manual intervention required – just write your code and
+ compile.
+
- PythonTeX allows
- you to run Python from within a document and typeset the
+ PythonTeX executes
+ Python code within your LaTeX documents and typesets the
results.
- For example,{" "}
+ Use{" "}
\py{"{"}2 + 4**2{"}"}
{" "}
- produces "18". You can use all{" "}
- available python libraries for
- Python 3, drawing plots via pylab, and use
- PythonTeX's SymPy support.
+ to compute "18" inline, leverage the entire Python ecosystem
+ including NumPy, SciPy, and Matplotlib for plots, or perform
+ symbolic math with SymPy. Access to{" "}
+ hundreds of Python libraries means
+ you can analyze data, generate visualizations, and format results
+ without leaving your document.
- Again, CoCalc automatically detects that you want to run PythonTeX
- and handles all the details for you.{" "}
+ CoCalc automatically detects PythonTeX usage and orchestrates the
+ compilation – you focus on your analysis, not the toolchain.
@@ -354,39 +494,36 @@ export default function LatexEditor({ customize }) {
alt="Editing LaTeX with R/Knitr code"
>
- CoCalc's editor also supports{" "}
- Knitr
+ Knitr brings R
+ statistical computing into your LaTeX workflow.
{" "}
- documents (with filename extension .Rnw). This gives
- you the ability to embed arbitrary{" "}
- R Software commands and
- plots in your file.
+ Create .Rnw files that weave together statistical
+ analysis, data visualization, and professional typesetting.
- Behind the scenes, CoCalc deals with all underlying details for
- you:
+ Perfect for statistical reports, academic papers, and data-driven
+ research. CoCalc handles everything automatically:
- installation and management of{" "}
- all R packages,
-
-
- orchestrates the full compilation pipeline for and
- running R, and
+ Thousands of R packages{" "}
+ pre-installed and maintained
+
Full compilation pipeline from R code to final PDF
- reconciles the line numbers of the .Rnw file with the
- corresponding .tex document for correct{" "}
- forward and inverse search
-
- .{" "}
+ Forward and inverse search
+ {" "}
+ between .Rnw source and PDF output
+
+ Run your statistical analysis and generate publication-ready
+ documents in one integrated environment.
+
- Let CoCalc help you find your way around in large documents!
+ Navigate effortlessly between source and PDF.
+
+
+ This speeds up your editing workflow, especially in large
+ documents.
- Forward Search lets you jump from the {" "}
- source to the corresponding part in the rendered preview. This
- saves you time looking for the output.
+ Forward Search: Click in your LaTeX source to
+ jump to the corresponding location in the PDF preview.
- Inverse search does the opposite: double click on
- the output and your cursor jumps to the line in the source file
- for that output.
+ Inverse Search: Double-click anywhere in the PDF
+ to jump back to the corresponding location in your source code.
+ You can also enable automatic sync mode to keep your source editor
+ aligned with the PDF as you scroll.
- Under the hood, CoCalc uses{" "}
- SyncTeX{" "}
- seamlessly.
+ Powered by{" "}
+ SyncTeX, working
+ seamlessly in the background.
@@ -520,6 +661,12 @@ export default function LatexEditor({ customize }) {
collaborators or give feedback to your students while they are
working on their assignments.
+
+ Query AI language models directly in the chat to
+ get help with your document. Ask questions about LaTeX syntax,
+ request suggestions for improving your writing, or discuss the
+ content of your document with AI assistants.
+
Collaborators who are offline will be notified about new messages
the next time they sign in. If you @mention them, they receive an
diff --git a/src/packages/next/pages/lang/[locale]/index.tsx b/src/packages/next/pages/lang/[locale]/index.tsx
index f46d6c660b..84e692494b 100644
--- a/src/packages/next/pages/lang/[locale]/index.tsx
+++ b/src/packages/next/pages/lang/[locale]/index.tsx
@@ -40,7 +40,7 @@ import basePath from "lib/base-path";
import SAGEMATH_JUPYTER from "public/cocalc-sagemath-2024-11-22-nq8.png";
import assignments from "public/features/cocalc-course-assignments-2019.png";
-import LatexEditorImage from "public/features/cocalc-latex-editor-2019.png";
+import LatexEditorImage from "public/features/latex-editor-main-20251003.png";
import RTC from "public/features/cocalc-real-time-jupyter.png";
import CHATROOM from "/public/features/chatroom.png";
import JupyterTF from "/public/features/cocalc-jupyter2-20170508.png";
@@ -579,11 +579,7 @@ function Hello({ customize }) {
}} />
-
+
);
diff --git a/src/packages/next/public/features/SCREENCASTS.md b/src/packages/next/public/features/SCREENCASTS.md
new file mode 100644
index 0000000000..c5fe12436b
--- /dev/null
+++ b/src/packages/next/public/features/SCREENCASTS.md
@@ -0,0 +1,38 @@
+# Screencasts
+
+## 1. Record Screencast
+
+Use the Chrome extension [Screen Recorder](https://chromewebstore.google.com/detail/screen-recorder/hniebljpgcogalllopnjokppmgbhaden) to record screencasts.
+
+## 2. Export Format
+
+Set it to record in **WebM** format, in the Screen Recorder extension.
+
+## 3. Convert WebM to MP4
+
+For website compatibility, convert the WebM file to MP4 format without re-encoding (preserves quality and file size):
+
+```bash
+ffmpeg -y -i input.webm -c:v copy input.mp4
+```
+
+**Command explanation:**
+
+- `-y` - Automatically overwrite output file if it exists
+- `-i input.webm` - Input file
+- `-c:v copy` - Copy video stream without re-encoding (fast, preserves quality)
+- `input.mp4` - Output file
+
+**Note:** This command preserves audio if present in the source file. The `-c:v copy` codec only copies the video stream, and ffmpeg will handle audio appropriately (copy if present, omit if not). Set `-an` to remove audio.
+
+## 4. Website Usage
+
+Include both formats in HTML for maximum browser compatibility:
+
+```html
+
+```
diff --git a/src/packages/next/public/features/cocalc-latex-concurrent-editing.png b/src/packages/next/public/features/cocalc-latex-concurrent-editing.png
deleted file mode 100644
index 81c3696cf0..0000000000
Binary files a/src/packages/next/public/features/cocalc-latex-concurrent-editing.png and /dev/null differ
diff --git a/src/packages/next/public/features/cocalc-latex-editor-2019.png b/src/packages/next/public/features/cocalc-latex-editor-2019.png
deleted file mode 100644
index bbb77bea52..0000000000
Binary files a/src/packages/next/public/features/cocalc-latex-editor-2019.png and /dev/null differ
diff --git a/src/packages/next/public/features/cocalc-latex-side-chat-v2.png b/src/packages/next/public/features/cocalc-latex-side-chat-v2.png
deleted file mode 100644
index 15c696499d..0000000000
Binary files a/src/packages/next/public/features/cocalc-latex-side-chat-v2.png and /dev/null differ
diff --git a/src/packages/next/public/features/latex-editor-darkmode-20251003.png b/src/packages/next/public/features/latex-editor-darkmode-20251003.png
new file mode 100644
index 0000000000..13b742c301
Binary files /dev/null and b/src/packages/next/public/features/latex-editor-darkmode-20251003.png differ
diff --git a/src/packages/next/public/features/latex-editor-main-20251003.png b/src/packages/next/public/features/latex-editor-main-20251003.png
new file mode 100644
index 0000000000..7d9da1f002
Binary files /dev/null and b/src/packages/next/public/features/latex-editor-main-20251003.png differ
diff --git a/src/packages/next/public/features/latex-editor-multifile-20251006.png b/src/packages/next/public/features/latex-editor-multifile-20251006.png
new file mode 100644
index 0000000000..bee34e3683
Binary files /dev/null and b/src/packages/next/public/features/latex-editor-multifile-20251006.png differ
diff --git a/src/packages/next/public/features/latex-editor-pythontex-20251003.png b/src/packages/next/public/features/latex-editor-pythontex-20251003.png
new file mode 100644
index 0000000000..4a21d03eeb
Binary files /dev/null and b/src/packages/next/public/features/latex-editor-pythontex-20251003.png differ
diff --git a/src/packages/next/public/features/latex-editor-realtime-sync-20251003.png b/src/packages/next/public/features/latex-editor-realtime-sync-20251003.png
new file mode 100644
index 0000000000..0886ac4066
Binary files /dev/null and b/src/packages/next/public/features/latex-editor-realtime-sync-20251003.png differ
diff --git a/src/packages/next/public/features/latex-editor-side-chat-20251004.png b/src/packages/next/public/features/latex-editor-side-chat-20251004.png
new file mode 100644
index 0000000000..440f32e49f
Binary files /dev/null and b/src/packages/next/public/features/latex-editor-side-chat-20251004.png differ
diff --git a/src/packages/next/public/features/latex-forward-inverse-02.mp4 b/src/packages/next/public/features/latex-forward-inverse-02.mp4
deleted file mode 100644
index f519db4f19..0000000000
Binary files a/src/packages/next/public/features/latex-forward-inverse-02.mp4 and /dev/null differ
diff --git a/src/packages/next/public/features/latex-forward-inverse-02.webm b/src/packages/next/public/features/latex-forward-inverse-02.webm
deleted file mode 100644
index 1b5c63a0cc..0000000000
Binary files a/src/packages/next/public/features/latex-forward-inverse-02.webm and /dev/null differ
diff --git a/src/packages/next/public/features/latex-forward-inverse-20251006.mp4 b/src/packages/next/public/features/latex-forward-inverse-20251006.mp4
new file mode 100644
index 0000000000..13a32914e4
Binary files /dev/null and b/src/packages/next/public/features/latex-forward-inverse-20251006.mp4 differ
diff --git a/src/packages/next/public/features/latex-forward-inverse-20251006.webm b/src/packages/next/public/features/latex-forward-inverse-20251006.webm
new file mode 100644
index 0000000000..e5333e7346
Binary files /dev/null and b/src/packages/next/public/features/latex-forward-inverse-20251006.webm differ
diff --git a/src/packages/util/consts/ui.ts b/src/packages/util/consts/ui.ts
index f1fc79d291..552a923303 100644
--- a/src/packages/util/consts/ui.ts
+++ b/src/packages/util/consts/ui.ts
@@ -28,3 +28,6 @@ export const DOC_AI = "https://doc.cocalc.com/ai.html";
// to all legal requirements. We thus don't use their trademark
// anywhere in our frontend.
export const R_IDE = "R IDE";
+
+// Icon unicode character for dark mode toggle (◑ - circle with right half black)
+export const DARK_MODE_ICON = 0x25d1;