CoCalc -- latex-editor.tsx

GitHub Repository: sagemathinc/cocalc
Path: blob/master/src/packages/next/pages/features/latex-editor.tsx
⁵⁹⁰⁷ views
1
/*
2
 *  This file is part of CoCalc: Copyright © 2022 Sagemath, Inc.
3
 *  License: MS-RSL – see LICENSE.md for details
4
 */
5

6
import { Descriptions, Layout, List } from "antd";
7

8
import { Icon } from "@cocalc/frontend/components/icon";
9
import { DARK_MODE_ICON } from "@cocalc/util/consts/ui";
10
import { COLORS } from "@cocalc/util/theme";
11

12
import Backups from "components/landing/backups";
13
import Code from "components/landing/code";
14
import Collaboration from "components/landing/collaboration";
15
import Comparison from "components/landing/compare";
16
import Content from "components/landing/content";
17
import Footer from "components/landing/footer";
18
import Head from "components/landing/head";
19
import Header from "components/landing/header";
20
import Info from "components/landing/info";
21
import LaTeX from "components/landing/latex";
22
import Pitch from "components/landing/pitch";
23
import Publishing from "components/landing/publishing";
24
import SignIn from "components/landing/sign-in";
25
import { Paragraph, Text, Title } from "components/misc";
26
import A from "components/misc/A";
27

28
import { Customize } from "lib/customize";
29
import withCustomize from "lib/with-customize";
30

31
import Pythontex from "public/features/cocalc-pythontex.png";
32
import Sagetex from "public/features/cocalc-sagetex.png";
33
import AIFormula from "public/features/latex-ai-formula.png";
34
import CustomCommand from "public/features/latex-custom-command-02.png";
35
import LatexDarkMode from "public/features/latex-editor-darkmode-20251003.png";
36
import LatexEditorImage from "public/features/latex-editor-main-20251003.png";
37
import LatexPythontex from "public/features/latex-editor-pythontex-20251003.png";
38
import LatexCollab from "public/features/latex-editor-realtime-sync-20251003.png";
39
import LaTeXMultiFile from "public/features/latex-editor-multifile-20251006.png";
40
import Knitr from "public/features/latex-editor-rnw-01.png";
41
import Sidechat from "public/features/latex-editor-side-chat-20251004.png";
42
import LatexTimetravel from "public/features/latex-editor-timetravel-01.png";
43
import Logo from "public/features/latex-logo.svg";
44

45
export default function LatexEditor({ customize }) {
46
  return (
47
    <Customize value={customize}>
48
      <Head title="Online LaTeX Editor" />
49
      <Layout>
50
        <Header page="features" subPage="latex-editor" />
51
        <Layout.Content>
52
          <Content
53
            landing
54
            startup={<LaTeX />}
55
            body={Logo}
56
            title={"Online LaTeX Editor"}
57
            subtitle={
58
              <>
59
                Focus on writing LaTeX. CoCalc takes care of everything else.
60
                {/*<hr />
61
                <A href="https://about.cocalc.com/2023/01/13/cocalcs-online-latex-editor/">
62
                  Learn much more about LaTeX in CoCalc from this new blog
63
                  post...
64
                </A> */}
65
              </>
66
            }
67
            image={LatexEditorImage}
68
          />
69

70
          <Pitch
71
            col1={
72
              <>
73
                <Title
74
                  level={2}
75
                  style={{
76
                    minHeight: "60px",
77
                    display: "flex",
78
                    alignItems: "center",
79
                    flexWrap: "wrap",
80
                  }}
81
                >
82
                  <span>
83
                    Working with <LaTeX /> made easy
84
                  </span>
85
                </Title>
86
                <Paragraph>
87
                  <List bordered size="small">
88
                    <List.Item>
89
                      <strong>Side-by-side preview</strong> with{" "}
90
                      <strong>
91
                        <a href="#a-forwardinverse">
92
                          forward and inverse search
93
                        </a>
94
                      </strong>{" "}
95
                      (TEX ↔ PDF)
96
                    </List.Item>
97
                    <List.Item>
98
                      <strong>Automatically compiles upon saving</strong> and
99
                      marks problems in the source file
100
                    </List.Item>
101
                    <List.Item>
102
                      <strong>
103
                        <a href="#a-timetravel">Records every change</a>
104
                      </strong>{" "}
105
                      while you type with{" "}
106
                      <strong>
107
                        <a href="#a-backups">periodic backups</a>
108
                      </strong>{" "}
109
                      of all files
110
                    </List.Item>
111
                    <List.Item>
112
                      <strong>
113
                        <a href="#a-ai-formula">AI-powered formula assistant</a>
114
                      </strong>{" "}
115
                      typesets formulas for you
116
                    </List.Item>
117
                    <List.Item>
118
                      <strong>
119
                        <a href="#a-calculations">Runs embedded calculations</a>
120
                      </strong>{" "}
121
                      with support for <a href="#a-sagetex">SageTeX</a>,{" "}
122
                      <a href="#a-pythontex">PythonTeX</a> and{" "}
123
                      <a href="#a-knitr">Knitr</a>
124
                    </List.Item>
125
                    <List.Item>
126
                      <strong>
127
                        <a href="#a-multifile">Multi-file support</a>
128
                      </strong>{" "}
129
                      that discovers included files automatically
130
                    </List.Item>
131
                  </List>
132
                </Paragraph>
133
              </>
134
            }
135
            col2={
136
              <>
137
                <Title
138
                  level={2}
139
                  style={{
140
                    minHeight: "60px",
141
                    display: "flex",
142
                    alignItems: "center",
143
                    flexWrap: "wrap",
144
                  }}
145
                >
146
                  <span>Fully-featured online editor</span>
147
                </Title>
148
                <Paragraph>
149
                  <List bordered size="small">
150
                    <List.Item>
151
                      <strong>
152
                        <a href="#a-realtimesync">Real-time collaboration</a>
153
                      </strong>{" "}
154
                      with unlimited collaborators
155
                    </List.Item>
156
                    <List.Item>
157
                      <strong>
158
                        <a href="#a-chat">Side-by-side chat</a>
159
                      </strong>{" "}
160
                      to discuss documents with collaborators and AI
161
                    </List.Item>
162
                    <List.Item>
163
                      <strong>
164
                        <a href="#a-darkmode">Dark Mode with PDF support</a>
165
                      </strong>{" "}
166
                      for comfortable night-time editing
167
                    </List.Item>
168
                    <List.Item>
169
                      <strong>
170
                        <a href="#a-timetravel">Complete revision history</a>
171
                      </strong>{" "}
172
                      to revert any changes
173
                    </List.Item>
174
                    <List.Item>
175
                      <strong>
176
                        <a href="#a-environments">
177
                          Fully managed <LaTeX /> environment
178
                        </a>
179
                      </strong>{" "}
180
                      with PDF LaTeX, XeLaTeX, and LuaTeX
181
                    </List.Item>
182
                    <List.Item>
183
                      <strong>
184
                        <a href="#a-computational">
185
                          Full computational environment
186
                        </a>
187
                      </strong>{" "}
188
                      accessible from any browser
189
                    </List.Item>
190
                  </List>
191
                </Paragraph>
192
              </>
193
            }
194
            ext="tex"
195
          />
196

197
          <SignIn startup={<LaTeX />} />
198

199
          <Collaboration
200
            image={LatexCollab}
201
            alt="Two users editing the same LaTeX file simultaneously with visible cursors showing real-time collaboration"
202
          >
203
            <Paragraph>
204
              Multiple users can <strong>edit the same file online</strong> at
205
              the same time. Changes are{" "}
206
              <strong>synchronized in real-time</strong> – you see the cursors
207
              and edits of other collaborators as they type.
208
            </Paragraph>
209

210
            <Paragraph>
211
              Share your project privately with{" "}
212
              <A href="https://doc.cocalc.com/project-settings.html#about-collaborators">
213
                <strong>an unlimited number of collaborators</strong>
214
              </A>
215
              . Compilation status and PDF output are also synchronized between
216
              everyone, ensuring that all collaborators experience the document
217
              in exactly the same way.
218
            </Paragraph>
219
          </Collaboration>
220

221
          <Info
222
            anchor="a-ai-formula"
223
            icon="robot"
224
            title="AI-powered formula assistant"
225
            image={AIFormula}
226
            alt="AI formula assistant dialog generating LaTeX formulas from natural language descriptions"
227
          >
228
            <Paragraph>
229
              CoCalc's extensive integration with various AI language models
230
              helps you typeset formulas.
231
            </Paragraph>
232
            <Paragraph>
233
              You enter a description of your desired formula and{" "}
234
              <strong>
235
                a language model of your choice transforms it into proper LaTeX
236
                code
237
              </strong>
238
              . The descriptions can come in various forms:
239
            </Paragraph>
240
            <Paragraph>
241
              <Descriptions
242
                layout="vertical"
243
                bordered
244
                column={1}
245
                size={"small"}
246
              >
247
                <Descriptions.Item label="Natural language description">
248
                  <Text code>drake equation</Text>
249
                </Descriptions.Item>
250

251
                <Descriptions.Item label="Simple algebraic notation">
252
                  <Text code>(a+b)^2 = a^2 + 2 a b + b^2</Text>
253
                </Descriptions.Item>
254

255
                <Descriptions.Item label="Combination of both">
256
                  <Text code>
257
                    integral from 0 to infinity of (1+sin(x))/x^2 dx
258
                  </Text>
259
                </Descriptions.Item>
260
              </Descriptions>
261
            </Paragraph>
262
            <Paragraph>
263
              Once you have a result you like, click "Insert" to add the formula
264
              to your document.
265
            </Paragraph>
266
          </Info>
267

268
          <Info
269
            anchor="a-darkmode"
270
            icon={
271
              <Icon
272
                style={{ fontSize: "40px", color: "white" }}
273
                unicode={DARK_MODE_ICON}
274
              />
275
            }
276
            title={
277
              <span style={{ color: "white" }}>Dark Mode with PDF Support</span>
278
            }
279
            image={LatexDarkMode}
280
            style={{ background: "rgb(50, 50, 50)", color: "white" }}
281
          >
282
            <Paragraph style={{ color: "white" }}>
283
              Love{" "}
284
              <span
285
                style={{
286
                  background: "black",
287
                  color: "white",
288
                  padding: "2px 5px",
289
                }}
290
              >
291
                dark mode
292
              </span>
293
              ? CoCalc has you covered!
294
            </Paragraph>
295
            <Paragraph style={{ color: "white" }}>
296
              The <LaTeX /> editor features dark UI elements as you'd expect,
297
              but goes further by inverting the PDF viewer colors. This means
298
              that even though your final PDF will have a white background, you
299
              can view and edit it with a dark background and bright text for
300
              comfortable night-time work.
301
            </Paragraph>
302
            <Paragraph style={{ color: COLORS.GRAY_L }}>
303
              Note: You can quickly disable this PDF dark mode, to double check
304
              the actual output.
305
            </Paragraph>
306
          </Info>
307

308
          <Info
309
            anchor="a-multifile"
310
            icon="folder-open"
311
            title="Multi-file support"
312
            image={LaTeXMultiFile}
313
            alt="LaTeX editor showing multiple files with automatic discovery of included files"
314
          >
315
            <Paragraph>
316
              Working with large LaTeX documents often means splitting your
317
              content across multiple files using <Code>\include{"{...}"}</Code>{" "}
318
              or <Code>\input{"{...}"}</Code> commands.{" "}
319
            </Paragraph>
320
            <Paragraph strong>
321
              CoCalc automatically discovers all included files and makes
322
              navigation easy.
323
            </Paragraph>
324
            <Paragraph>
325
              Each entry shows a brief snippet of its beginning, making it easy
326
              to identify the right file.
327
            </Paragraph>
328
            <Paragraph>
329
              <strong>
330
                <a href="#a-forwardinverse">Inverse search</a>
331
              </strong>{" "}
332
              works seamlessly with multi-file documents: double-click
333
              anywhere in the PDF and CoCalc automatically opens the correct
334
              subfile for you.
335
            </Paragraph>
336
            <Paragraph>
337
              Learn more in the{" "}
338
              <A href="https://doc.cocalc.com/latex#multi-file-support">
339
                multi-file support documentation
340
              </A>
341
              .
342
            </Paragraph>
343
          </Info>
344

345
          <Info.Heading
346
            anchor="a-calculations"
347
            icon="calculator"
348
            description={
349
              <>
350
                <Paragraph>
351
                  <strong>
352
                    Execute Python, Sage, or R code directly within your LaTeX
353
                    source
354
                  </strong>{" "}
355
                  to automatically generate figures, tables, formulas, and
356
                  results. Your computational code lives alongside your prose,
357
                  making your paper fully reproducible.
358
                </Paragraph>
359
                <Paragraph>
360
                  CoCalc supports{" "}
361
                  <A href="http://doc.sagemath.org/html/en/tutorial/sagetex.html">
362
                    SageTeX
363
                  </A>
364
                  , <A href="https://ctan.org/pkg/pythontex">PythonTeX</A>, and{" "}
365
                  <A href="https://yihui.name/knitr/">Knitr</A>. The code runs
366
                  during compilation, and the output is automatically included
367
                  in your PDF – change your code, recompile, and your document
368
                  updates.
369
                </Paragraph>
370
              </>
371
            }
372
          >
373
            Embed Python, Sage or R code in <LaTeX /> documents
374
          </Info.Heading>
375

376
          <Info
377
            anchor="a-computational"
378
            icon="laptop"
379
            title="Full computational environment"
380
            image={LatexPythontex}
381
            alt="LaTeX editor with PythonTeX showing source code and PDF output with a damped oscillation plot"
382
            wide
383
          >
384
            <Paragraph>
385
              <strong>
386
                Stop copying and pasting computational results into your papers.
387
              </strong>{" "}
388
              CoCalc gives you{" "}
389
              <strong>full access to computational software</strong> directly
390
              within your <LaTeX /> editor – seamlessly compute your results and
391
              publish them in the same environment.
392
            </Paragraph>
393
            <Paragraph>
394
              Run <A href="/features/python">Python</A>,{" "}
395
              <A href="http://www.sagemath.org/">SageMath</A>,{" "}
396
              <A href="/features/r-statistical-software">R</A>,{" "}
397
              <A href="/features/julia">Julia</A>, and more right alongside your
398
              document. All software is pre-installed and maintained – no setup
399
              required.
400
            </Paragraph>
401
            <Paragraph>
402
              Learn more on our <A href="/software">Available Software page</A>{" "}
403
              or <A href="/features/jupyter-notebook">Jupyter Notebook page</A>.
404
            </Paragraph>
405
          </Info>
406

407
          <Info
408
            anchor="a-sagetex"
409
            title="SageTex"
410
            icon="sagemath"
411
            image={Sagetex}
412
            alt="Editing LaTeX with SageTex code"
413
          >
414
            <Paragraph>
415
              <strong>
416
                <A href="http://doc.sagemath.org/html/en/tutorial/sagetex.html">
417
                  SageTeX
418
                </A>{" "}
419
                brings the power of{" "}
420
                <A href="https://www.sagemath.org/">SageMath</A> symbolic
421
                computation directly into your LaTeX documents.
422
              </strong>
423
            </Paragraph>
424
            <Paragraph>
425
              Write{" "}
426
              <Code>
427
                \sage{"{"}2 + 3{"}"}
428
              </Code>{" "}
429
              to get "5", use{" "}
430
              <Code>
431
                \sage{"{"}f.taylor(x, 0, 10){"}"}
432
              </Code>{" "}
433
              for Taylor expansions, and create plots with{" "}
434
              <Code>
435
                \sageplot{"{"}sin(x^2){"}"}
436
              </Code>
437
              . CoCalc automatically handles the full compilation pipeline:
438
            </Paragraph>
439
            <Paragraph>
440
              <ul>
441
                <li>
442
                  Runs the initial <LaTeX /> compilation pass
443
                </li>
444
                <li>
445
                  Executes <A href="https://www.sagemath.org/">SageMath</A> to
446
                  compute results, graphs, and images
447
                </li>
448
                <li>Completes the final compilation to produce your PDF</li>
449
              </ul>
450
            </Paragraph>
451
            <Paragraph>
452
              No manual intervention required – just write your code and
453
              compile.
454
            </Paragraph>
455
          </Info>
456

457
          <Info
458
            anchor="a-pythontex"
459
            title="PythonTex"
460
            icon="python"
461
            image={Pythontex}
462
            alt="Editing LaTeX with PythonTex code"
463
          >
464
            <Paragraph>
465
              <strong>
466
                <A href="https://ctan.org/pkg/pythontex">PythonTeX</A> executes
467
                Python code within your LaTeX documents and typesets the
468
                results.
469
              </strong>
470
            </Paragraph>
471
            <Paragraph>
472
              Use{" "}
473
              <Code>
474
                \py{"{"}2 + 4**2{"}"}
475
              </Code>{" "}
476
              to compute "18" inline, leverage the entire Python ecosystem
477
              including NumPy, SciPy, and Matplotlib for plots, or perform
478
              symbolic math with SymPy. Access to{" "}
479
              <A href="/software/python">hundreds of Python libraries</A> means
480
              you can analyze data, generate visualizations, and format results
481
              without leaving your document.
482
            </Paragraph>
483
            <Paragraph>
484
              CoCalc automatically detects PythonTeX usage and orchestrates the
485
              compilation – you focus on your analysis, not the toolchain.
486
            </Paragraph>
487
          </Info>
488

489
          <Info
490
            anchor="a-knitr"
491
            title="R/Knitr"
492
            icon="r"
493
            image={Knitr}
494
            alt="Editing LaTeX with R/Knitr code"
495
          >
496
            <Paragraph>
497
              <strong>
498
                <A href="https://yihui.name/knitr/">Knitr</A> brings R
499
                statistical computing into your LaTeX workflow.
500
              </strong>{" "}
501
              Create <code>.Rnw</code> files that weave together statistical
502
              analysis, data visualization, and professional typesetting.
503
            </Paragraph>
504
            <Paragraph>
505
              Perfect for statistical reports, academic papers, and data-driven
506
              research. CoCalc handles everything automatically:
507
            </Paragraph>
508
            <Paragraph>
509
              <ul>
510
                <li>
511
                  <A href="/software/r">Thousands of R packages</A>{" "}
512
                  pre-installed and maintained
513
                </li>
514
                <li>Full compilation pipeline from R code to final PDF</li>
515
                <li>
516
                  <A href="#a-forwardinverse">
517
                    <strong>Forward and inverse search</strong>
518
                  </A>{" "}
519
                  between <code>.Rnw</code> source and PDF output
520
                </li>
521
              </ul>
522
            </Paragraph>
523
            <Paragraph>
524
              Run your statistical analysis and generate publication-ready
525
              documents in one integrated environment.
526
            </Paragraph>
527
          </Info>
528

529
          <Info.Heading
530
            description={
531
              <>
532
                The following are some specific features of editing <LaTeX /> in
533
                CoCalc.
534
                <br />
535
                There is also more{" "}
536
                <A href="https://doc.cocalc.com/latex.html">
537
                  comprehensive documentation
538
                </A>
539
                .
540
              </>
541
            }
542
          >
543
            <LaTeX /> Editing Features
544
          </Info.Heading>
545

546
          <Info
547
            anchor="a-forwardinverse"
548
            title="Forward and Inverse search"
549
            icon="sync"
550
            video={[
551
              "features/latex-forward-inverse-20251006.webm",
552
              "features/latex-forward-inverse-20251006.mp4",
553
            ]}
554
            wide
555
            alt="Video showing forward and inverse search in a LaTeX document"
556
          >
557
            <Paragraph>
558
              <strong>Navigate effortlessly between source and PDF.</strong>
559
            </Paragraph>
560
            <Paragraph>
561
              This speeds up your editing workflow, especially in large
562
              documents.
563
            </Paragraph>
564
            <Paragraph>
565
              <strong>Forward Search:</strong> Click in your LaTeX source to
566
              jump to the corresponding location in the PDF preview.
567
            </Paragraph>
568
            <Paragraph>
569
              <strong>Inverse Search:</strong> Double-click anywhere in the PDF
570
              to jump back to the corresponding location in your source code.
571
              You can also enable automatic sync mode to keep your source editor
572
              aligned with the PDF as you scroll.
573
            </Paragraph>
574
            <Paragraph>
575
              Powered by{" "}
576
              <A href="https://github.com/jlaurens/synctex">SyncTeX</A>, working
577
              seamlessly in the background.
578
            </Paragraph>
579
          </Info>
580

581
          <Info
582
            anchor="a-environments"
583
            icon="tex-file"
584
            title={
585
              <>
586
                Managed <LaTeX /> environments
587
              </>
588
            }
589
            image={CustomCommand}
590
            alt="Menu showing the different LaTeX engines in CoCalc"
591
          >
592
            <Paragraph>
593
              CoCalc makes sure that your desired <LaTeX /> engine is available
594
              and ready to use. You can choose between{" "}
595
              <strong>
596
                <A href="http://www.tug.org/applications/pdftex/">PDF Latex</A>
597
              </strong>
598
              ,{" "}
599
              <strong>
600
                <A href="http://xetex.sourceforge.net/">XeLaTeX</A>
601
              </strong>{" "}
602
              or{" "}
603
              <strong>
604
                <A href="http://www.luatex.org/">LuaTeX</A>
605
              </strong>
606
              .
607
            </Paragraph>
608
            <Paragraph>
609
              Many packages and utilities like{" "}
610
              <A href="https://sourceforge.net/projects/pgf/">PGF and TikZ</A>{" "}
611
              are pre-installed.
612
            </Paragraph>
613
            <Paragraph>
614
              Behind the scenes,{" "}
615
              <A href="http://mg.readthedocs.io/latexmk.html">LatexMK</A> is
616
              configured to manage the compilation process.
617
            </Paragraph>
618
            <Paragraph>
619
              It is also possible to{" "}
620
              <strong>fully customize the compilation command</strong>, so you
621
              can bring your own shell script or even use a Makefile!
622
            </Paragraph>
623
          </Info>
624

625
          <Info
626
            anchor="a-timetravel"
627
            title="TimeTravel"
628
            icon="history"
629
            image={LatexTimetravel}
630
            alt={
631
              "Using the TimeTravel slider to see what changed in a LaTeX document"
632
            }
633
          >
634
            <Paragraph>
635
              The <strong>TimeTravel feature</strong> is specific to the CoCalc
636
              platform. It records all changes in the document in fine detail.
637
              You can go back and forth in time using a slider across thousands
638
              of changes to recover your previous edits.
639
            </Paragraph>
640
            <Paragraph>
641
              This is especially helpful for pinpointing which of the recent
642
              changes caused a <strong>compilation error</strong>. You can see
643
              the recent changes and exactly where the modifications happened,
644
              and who made them.
645
            </Paragraph>
646
          </Info>
647

648
          <Info
649
            anchor="a-chat"
650
            title="Side Chat"
651
            icon="comment"
652
            image={Sidechat}
653
            alt="Chatting about a LaTeX document right next to that document"
654
          >
655
            <Paragraph>
656
              A{" "}
657
              <strong>
658
                <A href="https://doc.cocalc.com/chat.html">side-by-side chat</A>
659
              </strong>{" "}
660
              for each <LaTeX /> file lets you discuss your content with
661
              collaborators or give feedback to your students while they are
662
              working on their assignments.
663
            </Paragraph>
664
            <Paragraph>
665
              <strong>Query AI language models</strong> directly in the chat to
666
              get help with your document. Ask questions about LaTeX syntax,
667
              request suggestions for improving your writing, or discuss the
668
              content of your document with AI assistants.
669
            </Paragraph>
670
            <Paragraph>
671
              Collaborators who are offline will be notified about new messages
672
              the next time they sign in. If you @mention them, they receive an
673
              email notification.
674
            </Paragraph>
675
            <Paragraph>
676
              Chat messages also support{" "}
677
              <A href="https://en.wikipedia.org/wiki/Markdown">Markdown</A>{" "}
678
              formatting with <LaTeX /> formulas.{" "}
679
            </Paragraph>
680
          </Info>
681

682
          <Backups />
683
          <Publishing />
684

685
          <Comparison
686
            name="latex"
687
            disclaimer
688
            title={
689
              <h2 style={{ textAlign: "center" }}>
690
                <Icon name="bolt" /> <LaTeX /> in CoCalc versus the competition
691
              </h2>
692
            }
693
          />
694

695
          <SignIn startup={<LaTeX />} />
696
        </Layout.Content>
697
        <Footer />
698
      </Layout>
699
    </Customize>
700
  );
701
}
702

703
export async function getServerSideProps(context) {
704
  return await withCustomize({ context });
705
}
706

707
Product

Resources

Company
